SCSS

思维导图

一、 注释

  • /* */: 编译后保留,压缩不保留
  • //: 编译后不保留
  • /*!*/: 编译后,压缩后都保留

二、嵌套

  • 父选择器(&)

  • 属性嵌套

编译前:

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
$color: green;

.nav {
  color: $color;
  .header {
    color: $color;
  }
  &:hover {
    color: $color;
  }
  & &-text {
    color: $color;
  }
}

/*嵌套属性*/
header {
  text: {
    align: center;
    decoration: none;
  }

  border: 1px solid #ccc {
    top: 0;
  }
}

编译后:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.nav {
  color: green;
}

.nav .header {
  color: green;
}

.nav:hover {
  color: green;
}

.nav .nav-text {
  color: green;
}
/*嵌套属性*/
header {
  text-align: center;
  text-decoration: none;
  border: 1px solid #ccc;
  border-top: 0;
}

三、变量

  • $定义变量
  • 插值语法#{$var}
  • 变量支持块级作用域

编译前:

1
2
3
4
5
$success: #000;

.button{
    & &-#{success}{...}
}

编译后:

1
.button .button-success {...}

四、@rules

1. 混合指令: @mixin&@include

编译前:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//定义
@mixin btn($color, $bgColor) {
  color: $color;
  span {
    background-color: $bgColor;
  }
}

//使用
.btn-warning {
  @include btn(#fff, #f00);
}
.btn-success {
  @include btn($bgColor: green, $color: #000);
}

编译后:

1
2
3
4
5
6
7
8
9
10
11
12
13
.btn-warning {
  color: #fff;
}
.btn-warning span {
  background-color: #f00;
}

.btn-success {
  color: #000;
}
.btn-success span {
  background-color: green;
}

2. 继承: @extend

编译前:

1
2
3
4
5
6
7
8
9
.btn {
  width: 40px;
  height: 20px;
}

.btn-success {
  @extend .btn;
  background-color: #0f0;
}

编译后:

1
2
3
4
5
6
7
8
9
.btn, 
.btn-success {
  width: 40px;
  height: 20px;
}

.btn-success {
  background-color: #0f0;
}

3. 导入: @import

1
@import 'filename';

  • 创建文件时使用_开头命名

  • 导入时省略_

  • _作用：当有scss文件不想编译时单独转成css文件，可以使用Partials方式命名文件，使得其不会被单独转成css文件。

4. 自定义函数: @function

编译前:

1
2
3
4
5
6
7
8
9
10
11
12
13
$colors: (
  "light": #eee
);

//定义
@function getColor($color) {
  @return map-get($colors, $color);
}

//使用
div {
  color: getColor("light");
}

编译后:

1
div {color: #eee;}

五、数据类型

检测方法: type-of()

1. number

1
2
$width: 5;
$width: 50px;

内置函数：

  • percentage()

  • round()

  • ceil()

  • floor()

  • abs()

  • min()

  • max()

  • random()

2. bool

true，false

3. string

1
2
$str: 'hello'; // 有引号
$str: hello;   // 无引号

内置函数:

  • to-upper-case()
  • to-lower-case()
  • str-length()

4. color

1
2
$color: red;
$color: #000;

内置函数:

  • lighten()
  • darken()

5. list

1
2
$list: (10px, 'string', red);
$list: (10px 'string' red);

内置函数:

  • length()
  • nth()
  • append()
  • index()
  • join()

6. map

1
$map: (top: 1px, bottom: 2px, left: 3px, right: 4px);

内置函数:

  • map-get()：查找键值
  • map-keys()：
  • map-values()
  • map-has-key()
  • map-merge()：合并map
  • map-remove()

六、运算符

  • 算术: + - * /
  • 逻辑: and or not
  • 关系: > < == >= <=

七、流程控制

1. 条件:

@if

1
2
3
4
5
6
7
@if 条件{
    ...
}@else if 条件{
    ...
}@else{
    ...
}

2. 循环: @for&@each&@while

1）@for

编译前:

1
2
3
4
5
@for $i from 1 through 3 {
  .button-#{$i} {
    color: green;
  }
}

编译后:

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

.button-2 {
  color: green;
}

.button-3 {
  color: green;
}

2）@each

1
@each $value in $list
1
@each $key,$value in $map

3）@while

1
2
3
@while 1 == 1 {
    ...
}

八、异常

  • @warn
  • @error