scss的常用技巧、循环、判断等

选择scss的原因

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

定义变量

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

基本语法 ->循环

   @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%);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

实用例子

// 定义一个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-get
    background-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%);
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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

判断

 @if  
1

例子 --> 混合和判断

本例子主要作用是画格子外界传入要画 几行几列
然后消除两个格子之间边框的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;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58