选择scss的原因

 循环在js或者任何编程语言都是必须的，博主不太喜欢less 是因为它的判断和循环提供的不全面，所以这篇主要聊scss

定义变量

 scss 已$ 开头定义变量 例如$c: '#fff'// 数组$liColor: yellow, #ffffff, green; js中的map 或者数组  --》 type-of($colorsMap)  返回是 list$colorsMap: (    primary: #007bff,danger: #f56c6c,success: #28a745
);

基本语法 ->循环

   @for $i from 0 through 5{// 可以拿到每次循环的变量	}
$liColor: yellow, #ffffff, green;
@each $color in $liColor{
$i: index($liColor, $color);  // 这样可以拿到每个颜色li:nth-child(#{$i}) {color: $color;&:hover {color: darken($color, 20%);}}
}

实用例子

// 定义一个map
$colorsMap: (primary: #007bff,danger: #f56c6c,success: #28a745
);
$font: 26px;
// 每个按钮的公共样式
.base {border: none;outline: none;cursor: pointer;padding: 3px 10px;color: #ffffff;font-size: calc($font / 2);
}
@for $i from 1 through length($colorsMap) {// 这么做就是获取 primary、danger、success 这些$key: nth(map-keys($colorsMap), $i);  // 用上面的键作为class .#{$key} {// 继承基本样式@extend .base;// 颜色： 在map中 获取对应key的值map-getbackground-color: map-get($colorsMap, $key);&:hover {background-color: darken(map-get($colorsMap, $key), 20%);}&:disabled {background-color: lighten(map-get($colorsMap, $key), 15%);}&.active {background-color: darken(map-get($colorsMap, $key), 30%);}}
}

上面的好处 我现在需要在新增一个class 那么我只需要在$colorsMap添加
$colorsMap: (// 加一个normal:'blue'
);
大大减少维护成本

判断

 @if  

例子 --> 混合和判断

本例子主要作用是画格子外界传入要画 几行几列
然后消除两个格子之间边框的border
@use "sass:math";
// 定义混合
@mixin grid($rows: 3,$columns: 3, $containerClass: "grid-container",$borderColor: #ccc,$borderWidth: 1px) {$gridCount: $columns * $rows;.#{$containerClass} {width: 500px;// 网格布局display: grid;// 外界要渲染的列grid-template-columns: repeat($columns, 1fr);// 外界要渲染的行grid-template-rows: repeat($rows, 1fr);div {// 这些样式由外界提供@content;border: $borderWidth solid $borderColor;@for $i from 0 through $gridCount {// 第几个格子&:nth-of-type(#{$i + 1}) {// 当前行$r: math.floor(calc($i / $columns)) + 1;// 当前列$c: $i % $columns + 1;// 默认情况下所有的行列去除左和下边框border-left: none ;border-bottom: none;// 最后一行@if $r == $rows {border-left: none;border-bottom:  $borderWidth solid $borderColor !important;}//  每一列开始的第一个@if $c == 1 {border-left: $borderWidth solid $borderColor !important;}}}}}
}
.container {// 使用混合、并要求混合创建一个叫做grid-containers的网格// 4行2列，边框颜色 灰色、 边框粗细为1px@include grid(4, 2, "grid-containers", #ccc, 1px){// 定义每个网格容器的样式padding-top: 5px;padding-left: 10px;padding-bottom: 5px;}
}