scss and less

发表于 | 更新于 | 评论数：
scss less

scss and less

scss

变量

使用 $ 来标识变量(老版 sass 使用 ！ 来标识变量)

变量声明

$basicbackground-color: red; // 统一背景颜色

使用

1
2
3
4
$background-color: red;
.myHeader{
  background-color: $background-color;
}

编译后

1
2
3
.myHeader{
  background-color: red;
}

变量作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$width: 50px;
nav {
  $width: 100px;
  width: $width
}
div {
  width: $width;
}

//编译后

nav {
  width: 100px;
}

div {
  width: 50px;
}

nav 中的 $width 只能应用在 nav {} 中

变量名

sass 的变量名可以与 css 中的属性名和选择器名称相同，包括中划线和下划线。

嵌套

父选择器的标识符&

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
.container{
  &-header{
    width:50px;
    p{
      color: red;
    }
    span{
      background-color: blue;
    }
  }
  &-footer{
    //
    width: 50px;
  }
  &::after{
    content:'*'
  }
  .other & {
    color: green;
  }
}

// 解析
.container-header {
  width: 50px;
}
.container-header p {
  color: red;
}
.container-header span {
  background-color: blue;
}
.container-footer {
  width: 50px;
}
.container::after {
  content: "*";
}
.other .container {
  color: green;
}