SASS高阶用法

# 1. 继承

@extend , 在使用的选择器中插入被继承的选择器样式。

.icon 
  ....

.error-icon 
  @extend .icon

.success-icon 
  @extend .icon

1
2
3
4
5
6
7
8
9

# 2. 混入 (Mixin)

@mixin , 定义可重复使用的样式片段，使用 @include ，可以将定义的 Mixin 导入

@mixin icon-style {...}

.error-icon {
  @include icon-style;
}

.success-icon {
  @include icon-style;
}

1
2
3
4
5
6
7
8
9

在一个混入中也可以引入其他混入。

@mixin special-icon {
  @include icon-style;
  @include special-style;
}

1
2
3
4

在混入中传递变量。

// $[变量名]:[默认值]
@mixin icon($bg-color:grey) {
  background-color: $bg-color;
}

.success-icon {
  @include icon(green);
}

.error-icon {
  @include icon(red)
}

1
2
3
4
5
6
7
8
9
10
11
12

# 3. 占位符

%placeholder ，使用表现上是一个类选择器，但是不会在编译之后的 css 文件中输出。

%icon {...}

.success-icon {
  @extend %icon;
}

.error-icon {
  @extend %icon;
}

1
2
3
4
5
6
7
8
9

# 占位符 VS 继承

// scss 使用占位符及非占位符实现继承
// ---- start ----

// 使用 占位符继承
%ph {
  background-color: red;
}

.ph-extend1 {
  @extend %ph;
  font-size: 12px;
}

.ph-extend2 {
  @extend %ph;
  font-size: 14px;
}

// 使用选择器 继承
.parent {
  background-color: green;
}

.parent-extend1 {
  @extend .parent;
  font-size: 12px;
}

.parent-extend2 {
  @extend .parent;
  font-size: 14px;
}
// ---- end ----

// 处理后，转换成的css结果
// ---- start ----
// 使用占位符继承
.ph-extend1, .ph-extend2 {
  background-color: red;
}

.ph-extend1 {
  font-size: 12px;
}

.ph-extend2 {
  font-size: 14px;
}

// 使用选择器继承
.parent, .parent-extend1, .parent-extend2 {
  background-color: green;
}

.parent-extend1 {
  font-size: 12px;
}

.parent-extend2 {
  font-size: 14px;
}

// ---- end ----

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
59
60
61
62
63

使用选择器继承和占位符继承的区别在于，编译成 css 只有是否会产生被继承的选择器
当代码中没有计划使用或者从来没有使用过被继承的选择器，就可以使用占位符来定义需要重复使用的样式

# 占位符 VS 混入

// scss分别使用继承和混入
// ---- start ----

// 使用继承
%extend {
  background-color: red;
}

.extend1 {
  @extend %extend;
  font-size: 12px;
}

.extend2 {
  @extend %extend;
  font-size: 14px;
}

// 使用混入
@mixin mixin {
  background-color: green;
}

.mixin1 {
  @include mixin;
  font-size: 12px;
}

.mixin2 {
  @include mixin;
  font-size: 14px;
}
// ---- end ----

// 处理后，转换成的css结果
// ---- start ----
// 使用继承
.extend1, .extend2 {
  background-color: red;
}

.extend1 {
  font-size: 12px;
}

.extend2 {
  font-size: 14px;
}

// 使用混入
.mixin1 {
  background-color: green;
  font-size: 12px;
}

.mixin2 {
  background-color: green;
  font-size: 14px;
}
// ---- end ----

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
59
60

使用 extend 继承会将公共的样式部分同时声明
minxin 混入会将公共样式分别插入使用混入的地方
过度使用混入会使得编译之后 CSS 文件体积变大

# 4. 分支选择

使用 @if、@else if、@else ，控制声明的样式块或选择器。

@mixin border-color($color, $direction) {
  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-left-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}
  
.border-red-left {
  @include border-color(red, left);
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 5. 循环函数

使用 @ for 关键字，进行循环操作，常见用法如相似度很高的同类选择器的定义。

@for 有以下两种使用方式：

// @for $var from <start> through <end>
// @for $var from <start> to <end>
// from through 属于 [] 左右闭区间
@for $i from 1 through 3 {
  .item-a-#{$i} {
    width: $i * 2px;
  }
}
// result: .item-a-1 ... .item-a-3

// from to 属于 [) 左闭右开区间
@for $i from 1 to 3 {
  .item-b-#{$i} {
    width: $i * 2px;
  }
}
// result: .item-b-1 ... .item-b-2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

使用 @while 关键字也可以实现循环操作，但是我们平时一般很少，这里简单带过一下。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

1
2
3
4
5

# 6. 遍历函数

使用 @each 关键字对列表进行遍历操作。使用方式如下：

// @each $var in <list>
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 7. 内置 API 函数

官方内置了一些比较实用的 API 函数，比如列表操作：append、index、length，数值操作：max、min，Map 操作：map-get、map-has-key, 等等。

推荐阅读这篇文章: sass 内置函数 (opens new window)

#SASS

上次更新: 12/12/2023, 9:12:33 AM

← SASS中的数学函数如何封装命令式组件→