mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-04-06 03:57:55 +08:00
init：scss初始化
This commit is contained in:
talktao
parent
47da340996
commit
350d5aa91f
204
src/assets/scss/index.scss
Normal file
204
src/assets/scss/index.scss
Normal file
@ -0,0 +1,204 @@
|
||||
@import './reset.scss';
|
||||
@import './mixin.scss';
|
||||
@import './variables.scss';
|
||||
html {
|
||||
@include root-font-size();
|
||||
}
|
||||
//@author TalkTao
|
||||
|
||||
.flex-shrink-0 {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.flex-grow-0 {
|
||||
flex-grow: 0;
|
||||
}
|
||||
.flex-grow-1 {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.flex-column {
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex-wrap {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.object-fit-cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
.border-box {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.fw-bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.w-0 {
|
||||
width: 0;
|
||||
}
|
||||
.w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
.w-50{
|
||||
width: 50%;
|
||||
}
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
.text-ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
@each $key, $val in $fontSizeS {
|
||||
.fs-#{$key} {
|
||||
font-size: #{$val};
|
||||
}
|
||||
}
|
||||
//.d-flex {display: flex;}
|
||||
@each $item in $displayList {
|
||||
.d-#{$item} {
|
||||
display: #{$item};
|
||||
}
|
||||
}
|
||||
//.flex-center {justify-content: center;}
|
||||
@each $commonKey, $commonVal in $flexCommonValues {
|
||||
.flex-#{$commonKey} {
|
||||
display: flex;
|
||||
justify-content: #{$commonVal};
|
||||
align-items: #{$commonVal};
|
||||
}
|
||||
.align-self-#{$commonKey} {
|
||||
align-self: #{$commonVal};
|
||||
}
|
||||
}
|
||||
//.justify-content-between {justify-content: sapce-between;}
|
||||
@each $key, $val in $justify-content-values {
|
||||
.justify-content-#{$key} {
|
||||
justify-content: #{$val};
|
||||
}
|
||||
}
|
||||
//.align-items-start {align-items-start: flex-start;}
|
||||
@each $key, $val in $align-items-values {
|
||||
.align-items-#{$key} {
|
||||
align-items: #{$val};
|
||||
}
|
||||
}
|
||||
//.postion-absolute {absolute;}
|
||||
@each $pos in $positionList {
|
||||
.position-#{$pos} {
|
||||
position: #{$pos};
|
||||
}
|
||||
}
|
||||
//.overflow-x-scroll {overflow-x:scroll}
|
||||
@each $dir in $overflowDirs {
|
||||
.#{$dir}-scroll {
|
||||
#{$dir}: scroll;
|
||||
}
|
||||
}
|
||||
//pt-5 {padding-top: 1vw}
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
@for $size from 1 through 50 {
|
||||
.rounded-#{$size} {
|
||||
border-radius: #{$size}vw;
|
||||
}
|
||||
@each $t_d_key, $t_d_val in $spaceTypes_Dirs {
|
||||
.#{$t_d_key}-#{$size} {
|
||||
#{$t_d_val}: #{$size}vw;
|
||||
}
|
||||
}
|
||||
.mx-#{$size} {
|
||||
margin-left: #{$size}vw;
|
||||
margin-right: #{$size}vw;
|
||||
}
|
||||
.my-#{$size} {
|
||||
margin-top: #{$size}vw;
|
||||
margin-bottom: #{$size}vw;
|
||||
}
|
||||
.px-#{$size} {
|
||||
padding-left: #{$size}vw;
|
||||
padding-right: #{$size}vw;
|
||||
}
|
||||
.py-#{$size} {
|
||||
padding-top: #{$size}vw;
|
||||
padding-bottom: #{$size}vw;
|
||||
}
|
||||
}
|
||||
//top-0 {top: 0;}
|
||||
@each $type, $val in $positionTypes {
|
||||
.#{$type}-0 {
|
||||
#{$val}: 0;
|
||||
}
|
||||
}
|
||||
//bg-white {background-color: white;}
|
||||
@each $key, $val in $colors {
|
||||
.bg-#{"" + $key} {
|
||||
background-color: #{$val};
|
||||
}
|
||||
.text-#{"" + $key} {
|
||||
color: #{$val};
|
||||
}
|
||||
}
|
||||
//.border-pill {border-radius: 50rem}
|
||||
@each $key, $val in $radiusList {
|
||||
.border-#{$key} {
|
||||
border-radius: #{$val};
|
||||
}
|
||||
}
|
||||
//.opation-75 {opacity: 0.75}
|
||||
@for $index from 0 through 4 {
|
||||
.opacity-#{$index * 25} {
|
||||
opacity: #{$index * 0.25};
|
||||
}
|
||||
}
|
||||
//.text-center {text-align: center}
|
||||
@each $var in $textAlignDirs {
|
||||
.text-#{$var} {
|
||||
text-align: #{$var};
|
||||
}
|
||||
}
|
||||
//.border-bottom-1 {border-bottom: 1px} .border-bottom {border-bottom: 1px}
|
||||
@for $size from 0 to 5 {
|
||||
@each $posKey, $posVal in $positionTypes {
|
||||
@if $size == 0 {
|
||||
.border-#{$posKey} {
|
||||
border-#{$posVal}: 1px solid #e6e6e6;
|
||||
}
|
||||
} @else {
|
||||
.border-#{$posKey}-#{$size} {
|
||||
border-#{$posVal}: #{$size}px solid #e6e6e6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@mixin placeholderColor($color) {
|
||||
&::input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
color: $color;
|
||||
}
|
||||
&::-webkit-input-placeholder {
|
||||
/*WebKit browsers*/
|
||||
color: $color;
|
||||
}
|
||||
&::-moz-input-placeholder {
|
||||
/*Mozilla Firefox*/
|
||||
color: $color;
|
||||
}
|
||||
&::-ms-input-placeholder {
|
||||
/*Internet Explorer*/
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
@mixin ellipsisRow($row: 1) {
|
||||
@debug "$row is #{$row}";
|
||||
@if $row == 1 {
|
||||
// @debug "1行";
|
||||
@extend .text-ellipsis;
|
||||
} @else {
|
||||
// @debug "多行";
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box; // 作为弹性伸缩盒子模型显示。
|
||||
-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
|
||||
-webkit-line-clamp: #{$row}; // 显示的行
|
||||
}
|
||||
}
|
||||
191
src/assets/scss/mixin.scss
Normal file
191
src/assets/scss/mixin.scss
Normal file
@ -0,0 +1,191 @@
|
||||
// 清除浮动
|
||||
@mixin clearfix {
|
||||
&:after {
|
||||
content: "";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
// 多行隐藏
|
||||
@mixin textoverflow($clamp:1) {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-o-text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $clamp;
|
||||
/*! autoprefixer: ignore next */
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
//flex box
|
||||
@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
|
||||
display: flex;
|
||||
display: -webkit-flex;
|
||||
flex: 1;
|
||||
justify-content: $jc;
|
||||
-webkit-justify-content: $jc;
|
||||
align-items: $ai;
|
||||
-webkit-align-items: $ai;
|
||||
flex-direction: $fd;
|
||||
-webkit-flex-direction: $fd;
|
||||
flex-wrap: $fw;
|
||||
-webkit-flex-wrap: $fw;
|
||||
}
|
||||
|
||||
|
||||
/* 移动端页面设计稿宽度 */
|
||||
$design-width: 750;
|
||||
/* 移动端页面设计稿dpr基准值 */
|
||||
$design-dpr: 2;
|
||||
/* 将移动端页面分为10块 */
|
||||
$blocks: 10;
|
||||
/* 缩放所支持的设备最小宽度 */
|
||||
$min-device-width: 320px;
|
||||
/* 缩放所支持的设备最大宽度 */
|
||||
$max-device-width: 750px;
|
||||
|
||||
/*
|
||||
rem与px对应关系，1rem代表html font-size值（为一块的宽度），$rem即为$px对应占多少块
|
||||
|
||||
$px $rem
|
||||
------------- === ------------
|
||||
$design-width $blocks
|
||||
*/
|
||||
|
||||
/* html根元素的font-size定义，简单地将页面分为$blocks块，方便计算 */
|
||||
@mixin root-font-size() {
|
||||
font-size: calc(100vw / $blocks);
|
||||
|
||||
body {
|
||||
@include container-min-width();
|
||||
}
|
||||
|
||||
/* 最小宽度定义 */
|
||||
@media screen and (max-width: $min-device-width) {
|
||||
font-size: calc($min-device-width / $blocks);
|
||||
}
|
||||
|
||||
/* 最大宽度定义 */
|
||||
&[data-content-max] {
|
||||
body[data-content-max] {
|
||||
@include container-max-width();
|
||||
}
|
||||
|
||||
@media screen and (min-width: $max-device-width) {
|
||||
font-size: calc($max-device-width / $blocks);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 单位px转化为rem */
|
||||
@function px2rem($px) {
|
||||
@return #{$px / $design-width * $blocks}rem;
|
||||
}
|
||||
|
||||
/* 单位rem转化为px，可用于根据rem单位快速计算原px */
|
||||
@function rem2px($rem) {
|
||||
@return #{$rem / $blocks * $design-width}px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 实现固定宽高比
|
||||
* @param {string} $position: relative 定位方式
|
||||
* @param {string} $width: 100% 容器宽度
|
||||
* @param {string} $sub: null 容器的目标子元素
|
||||
* @param {number} $aspectX: 1 容器宽
|
||||
* @param {number} $aspectY: 1 容器高
|
||||
*/
|
||||
@mixin aspect-ratio($position: relative,
|
||||
$width: 100%,
|
||||
$sub: null,
|
||||
$aspectX: 1,
|
||||
$aspectY: 1) {
|
||||
overflow: hidden;
|
||||
position: $position;
|
||||
padding-top: percentage($aspectY / $aspectX);
|
||||
width: $width;
|
||||
height: 0;
|
||||
|
||||
@if $sub==null {
|
||||
$sub: "*";
|
||||
}
|
||||
|
||||
&>#{$sub} {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 设置容器拉伸的最小宽度 */
|
||||
@mixin container-min-width() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
min-width: $min-device-width;
|
||||
}
|
||||
|
||||
/* 设置容器拉伸的最大宽度 */
|
||||
@mixin container-max-width() {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
max-width: $max-device-width;
|
||||
}
|
||||
|
||||
/* 设置字体大小，不使用rem单位， 根据dpr值分段调整 */
|
||||
@mixin font-size($fontSize) {
|
||||
font-size: $fontSize / $design-dpr;
|
||||
|
||||
[data-dpr="2"] & {
|
||||
font-size: $fontSize / $design-dpr * 2;
|
||||
}
|
||||
|
||||
[data-dpr="3"] & {
|
||||
font-size: $fontSize / $design-dpr * 3;
|
||||
}
|
||||
}
|
||||
|
||||
/* 清除浮动 */
|
||||
@mixin clearfix {
|
||||
*zoom: 1;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 0;
|
||||
visibility: hidden;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
*$line:超出显示几行省略号
|
||||
*$substract:预留区域百分比
|
||||
*/
|
||||
@mixin text-overflow($line:1, $substract:0) {
|
||||
overflow: hidden;
|
||||
|
||||
@if $line==1 {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100% -$substract;
|
||||
}
|
||||
|
||||
@else {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: $line;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@mixin WH($Width:100%, $Height:100%) {
|
||||
width: $Width;
|
||||
height: $Height;
|
||||
}
|
||||
60
src/assets/scss/reset.scss
Normal file
60
src/assets/scss/reset.scss
Normal file
@ -0,0 +1,60 @@
|
||||
/* http://meyerweb.com/eric/tools/css/reset/
|
||||
v4.0 | 20180602
|
||||
License: none (public domain)
|
||||
*/
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
||||
small, strike, strong, sub, sup, tt, var,
|
||||
b, u, i, center,
|
||||
dl, dt, dd, menu, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
main, menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, main, menu, nav, section {
|
||||
display: block;
|
||||
}
|
||||
/* HTML5 hidden-attribute fix for newer browsers */
|
||||
*[hidden] {
|
||||
display: none;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
menu, ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
img{
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* 去除iPhone中默认的input样式 */
|
||||
input[type="submit"],input[type="reset"],input[type="button"],input:focus,button:focus,select:focus,textarea:focus{ outline: none;}
|
||||
input{-webkit-appearance:none; resize: none; border-radius: 0;}
|
||||
|
||||
73
src/assets/scss/variables.scss
Normal file
73
src/assets/scss/variables.scss
Normal file
@ -0,0 +1,73 @@
|
||||
$background-color: #eeeeee;
|
||||
$title: 18px;
|
||||
$primary: #b42e46;
|
||||
$positionList: (relative, absolute, fixed);
|
||||
$displayList: (flex, block, inline-block, none);
|
||||
$flexCommonValues: (
|
||||
start: flex-start,
|
||||
center: center,
|
||||
end: flex-end,
|
||||
);
|
||||
$justify-content-values: (
|
||||
start: flex-start,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly,
|
||||
end: flex-end,
|
||||
);
|
||||
$align-items-values: (
|
||||
start: flex-start,
|
||||
center: center,
|
||||
end: flex-end,
|
||||
);
|
||||
$overflowDirs: (overflow, overflow-x, overflow-y);
|
||||
$spaceTypes_Dirs: (
|
||||
"p": padding,
|
||||
"m": margin,
|
||||
"ps": padding-left,
|
||||
"pe": padding-right,
|
||||
"pt": padding-top,
|
||||
"pb": padding-bottom,
|
||||
"ms": margin-left,
|
||||
"me": margin-right,
|
||||
"mt": margin-top,
|
||||
"mb": margin-bottom,
|
||||
);
|
||||
$positionTypes: (
|
||||
"top": top,
|
||||
"bottom": bottom,
|
||||
"left": left,
|
||||
"right": right,
|
||||
"start": left,
|
||||
"end": right,
|
||||
);
|
||||
$colors: (
|
||||
primary: $primary,
|
||||
white: #ffffff,
|
||||
muted: #6c757d,
|
||||
black: #000,
|
||||
dark: #333,
|
||||
bgPrimary: "#303c5a",
|
||||
red: red,
|
||||
immediateColor: #94765c,
|
||||
);
|
||||
$radiusList: (
|
||||
circle: 100%,
|
||||
pill: 50rem,
|
||||
);
|
||||
$fontSizeS: (
|
||||
6: 3.2vw,
|
||||
5: calc(3.2vw * 1.1),
|
||||
4: calc(3.2vw * 1.2),
|
||||
3: calc(3.2vw * 1.3),
|
||||
2: calc(3.2vw * 1.4),
|
||||
1: calc(3.2vw * 1.5),
|
||||
);
|
||||
$textAlignDirs: (left, center, right);
|
||||
//导出js变量
|
||||
:export {
|
||||
primary: $primary;
|
||||
bgPrimary: "#303c5a";
|
||||
muted: #6c757d;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user