mirror of
https://github.com/talktao/Vue3-Vite-Vant-TS-H5.git
synced 2025-04-27 20:29:02 +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