scss基础语法的使用

发表于 | 分类于 ，

对scss语法做一个简单的总结。

1. 变量声明及使用

1
2
3
4
$color: red;
.box {
 	color: $color;
}

2. mixin和include

2.1 简单使用
1
2
3
4
5
6
7
$bgColor: red;
@mixin bg {
    background: $bgColor;
}
.box {
    @include bg;
}

编译结果：

1
2
3
4
.box {
  background: red;
}

2.2 进阶使用
1
2
3
4
5
6
7
8
9
10
$namespace: 'zz';
@mixin B($name){
    $aaa: $namespace + '_' + $name;
    .#{$aaa} {
        @content;
    }
}
@include B(input) {
    font-size: 12px;
}

编译结果：

1
2
3
4
.zz_input {
  font-size: 12px;
}

3. 列表和循环

3.1 for循环
1
2
3
4
5
6
7
8
9
10
11
$list: red, green, blue;
@for $i from 1 through 3 {
    .status-#{$i} {
        color: nth($list, $i)
    }
}
@for $i from 1 to 4 {
    .status-#{$i} {
        color: nth($list, $i)
    }
}

注：nth可以获取数组的某个元素；
through和to的编译结果一致，要注意是的to走不到最后一个数：

1
2
3
4
5
6
7
8
9
10
11
12
.status-1 {
  color: red;
}

.status-2 {
  color: green;
}

.status-3 {
  color: blue;
}

3.2 each循环
1
2
3
4
5
6
7
$list:red,green,blur;

@each $item in $list {
    .#{$item} {
        color: $item
    }
}

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
.red {
  color: red;
}

.green {
  color: green;
}

.blur {
  color: blur;
}

4. map结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$colorMap: (
	fail: 'red',
	success: 'green',
	pendding: 'blue'
);
$bgColorMap: (
	fail: 'red',
	success: 'green',
	pendding: 'blue'
);
@each $key, $value in $colorMap {
    .#{$key} {
        color: $value;
        border-color: map-get($bgColorMap, $key)
    }
}

编译结果：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.fail {
  color: "red";
  border-color: "red";
}

.success {
  color: "green";
  border-color: "green";
}

.pendding {
  color: "blue";
  border-color: "blue";
}

5. 函数

1
2
3
4
5
6
7
8
9
10
11
12
@function vw($n) {
	@return calc($n*100vw/750)
};
@function px($n) {
	@return calc(#{var(--rootWidth)} * #{$n} / 1920);
}
@function vh($n) {
	@return calc($n * 100vh / 1080);
}
body {
	font-size: vw(10)
}