:::info 个人用的SASS初始化的一套样式 :::

    1. /*========================================
    2. *******初始化********
    3. *author：雷神(LEISHEN)
    4. *use:日常工作项目
    5. *支持的项目可以直接使用,不支持SASS可以转成CSS再使用
    6. ==========================================*/
    8. //定义变量
    9. $color:(white-df:#FFFFFF,black-df:#333333);//颜色
    10. $size:(xs:0.8,df:1,sm:1.4,lg:2,xl:2.8,xxl:3.2,sl:4,xsl:8);//尺寸倍数对应
    12. /* ==================
    13.           全局配置
    14.  ==================== */
    15. html{
    16.   font-size:10px;
    17.   body{
    18.     font-size:1.4rem;
    19.     width: 100vw;
    20.     min-height: 100vh; 
    21.     color: #333333;
    22.       font-family: Helvetica Neue, Helvetica, sans-serif;
    23.   }
    24. }
    25. body, div, dl, dt, dd, ul, ol, li,
    26. h1, h2, h3, h4, h5, h6, pre, code,
    27. form, fieldset, legend, input, button,
    28. textarea, p, blockquote, th, td {
    29.     margin: 0;
    30.     padding: 0;
    31.     box-sizing: border-box;
    32. }
    33. a,a:visited{color: #333;text-decoration: none}
    35. /* ==================
    36.           公共Class
    37.  ==================== */
    39. /*  -- 块 -- */
    40.  .block{display: block;}
    41.  .hidden{display: none;}
    43. /*  -- flex弹性布局 -- */
    44. .flex{display:flex}
    45. .flex-direction{flex-direction:column}//按列排列
    46. .flex-wrap{flex-wrap:wrap}//允许换行
    47. // 主轴对齐方式
    48. .justify-start{justify-content:flex-start}
    49. .justify-end{justify-content:flex-end}
    50. .justify-center{justify-content:center}
    51. .justify-between{justify-content:space-between}
    52. .justify-around{justify-content:space-around}
    53. // 副轴对齐方式
    54. .align-start{align-items:flex-start}
    55. .align-end{align-items:flex-end}
    56. .align-center{align-items:center}
    57. .align-stretch{align-items:stretch}
    58. // 单个项目对齐方式
    59. .self-start{align-self:flex-start}
    60. .self-center{align-self:flex-center}
    61. .self-end{align-self:flex-end}
    62. .self-stretch{align-self:stretch}
    63. .align-stretch{align-items:stretch}
    64. // 单个项目空间占比
    65. .basis-xs{flex-basis:20%}
    66. .basis-sm{flex-basis:40%}
    67. .basis-df{flex-basis:50%}
    68. .basis-lg{flex-basis:60%}
    69. .basis-xl{flex-basis:80%}
    70. // 单个项目显示比例
    71. .flex-sub{flex:1}
    72. .flex-twice{flex:2}
    73. .flex-treble{flex:3}
    75. /*  -- 外边距 -- */
    76. .margin-no{margin:0;}
    77. .margin-auto{margin:auto;}
    78.   @each $n,$v in $size {
    79.     .margin-#{$n}{margin:1*$v+rem}
    80.     .margin-top-#{$n}{margin-top:1*$v+rem}
    81.     .margin-left-#{$n}{margin-left:1*$v+rem}
    82.     .margin-right-#{$n}{margin-right:1*$v+rem}
    83.     .margin-bottom-#{$n}{margin-bottom:1*$v+rem}
    84.     .margin-lr-#{$n}{margin-left:1*$v+rem;margin-right:1*$v+rem;}
    85.     .margin-tb-#{$n}{margin-top:1*$v+rem;margin-bottom:1*$v+rem;}
    86.   }
    88.   /*  -- 内边距 -- */
    89. .padding-no{padding:0;}
    90.   @each $n,$v in $size {
    91.     .padding-#{$n}{padding:1*$v+rem}
    92.     .padding-top-#{$n}{padding-top:1*$v+rem}
    93.     .padding-left-#{$n}{padding-left:1*$v+rem}
    94.     .padding-right-#{$n}{padding-right:1*$v+rem}
    95.     .padding-bottom-#{$n}{padding-bottom:1*$v+rem}
    96.     .padding-lr-#{$n}{padding-left:1*$v+rem;padding-right:1*$v+rem;}
    97.     .padding-tb-#{$n}{padding-top:1*$v+rem;padding-bottom:1*$v+rem;}
    98.   }
    100.   /*  -- 文字 -- */
    101.   .text-Abc { text-transform: Capitalize;}//首字母大写
    102.   .text-ABC {text-transform: Uppercase;}//全部大写
    103.   .text-abc { text-transform: Lowercase;}//全部小写
    104.   .text-price::before {content: "¥";margin-right: 0.8rem;}//人民币显示
    105.   .text-bold{font-weight:700}//加粗
    106.   .text-center{text-align:center}//居中
    107.   .text-left{text-align:left}//居左
    108.   .text-right{text-align:right}//居右
    109.   .text-jusitify{text-align:justify;text-align-last: justify}//两侧对齐
    110.   // 文字溢出显示省略号
    111.   .text-cut1{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;    }//单行
    112.   .text-cut2{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;    }//2行
    113.   .text-cut3{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3;-webkit-box-orient: vertical;    }//三行
    114.   // 文字大小
    115.   @each $n,$v in $size {
    116.     .text-#{$n}{font-size:1*$v+rem}
    117.   }
    119.   /*  -- 颜色 -- */
    120.   @each $cn,$cv in $color {
    121.     .c-#{$cn}{color:$cv}
    122.     .bg-#{$cn}{background-color:$cv}
    123.   }
    125.   /*  -- 宽度 -- */
    126.   @for $var from 1 to 10 {
    127.     .width#{$var}{width:10%*$var} ;
    128.   }
    129.   /*  -- 边框 -- */
    130.   .border-no{border: none;}
    131.   /*  -- 圆角 -- */
    132.   .round {border-radius: 100%; }//圆角
    133.   .radius5{border-radius: 5px;}//小圆角
    134.   .radius10{border-radius: 10px;}//小圆角
    135.   .radius15{border-radius: 15px;}//小圆角
    136.   .radius20{border-radius: 20px;}//小圆角  
    137.   .radius30{border-radius: 30px;}//小圆角