Less和Scss语法对比

# 变量

# less

@width: 10px;
@height: @width + 10px;
#header {
  width: @width;
  height: @height;
}
// 编译为
#header {
  width: 10px;
  height: 20px;
}

1
2
3
4
5
6
7
8
9
10
11

# scss

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
// 编译为
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

1
2
3
4
5
6
7
8
9
10
11

# 嵌套

两者用法相似，都使用 & 代表父级

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }

  &:after {
    content: " ";
    display: block;
    font-size: 0;
  }
}
// 编译为
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header:after {
  content: " ";
  display: block;
  font-size: 0;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 混合

# less

直接定义类选择器 .bordered 或 ID 选择器 #bordered，像函数一样使用 .bordered()、#bordered()，这样就能包含选择器中定义的属性。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

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

# scss

less中的混合更像scss中的扩展继承。

# @extend 扩展继承

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  @extend .bordered;
}

.post a {
  color: red;
  @extend .bordered;
}

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

# @mixin 混合

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box {
  @include transform(rotate(30deg));
}
// 编译为
.box {
  -webkit-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  transform: rotate(30deg);
}

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

#less #sass

上次更新: 2023/09/22, 16:54:32

← input file 上传文件指定文件类型 HTTP常见响应码→