相同点：
1、less和scss都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能。
2、都可以通过自带的插件，转成相对应的css文件。
3、都可以参数混入，可以传递参数的class，就像函数一样。
4、嵌套的规则相同，都是class嵌套class。
不同点： 1、声明和使用变量，less用@，scss用$
1
2
3
4
5
6
7
8
9
// less写法
@color: #f00;
// scss写法
$color: #f00;
.container {
color: @color;
backgroud-color: $color;
}
2、变量插值、可以为less与scss声明变量，变量作为css选择器。less采用@{xxx}，scss采用#{xxx}
// less写法
@container: search;
.@{container} {
color: #f00;
}
1
2
3
4
5
// scss写法
$container: search;
.#{container} {
color: #f00;
}
3、scss支持条件语句（可以使用if/else、for、while循环等），less不支持
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// scss写法：
// @if/else
$type: a;
p {
font-size: 12px;
@if $type == a {
color: red;
} @else if $type == b {
color: blue;
} @else {
color: black;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// @for
// @for $var from <start> through <end> 包含end
// @for $var from <start> to <end> 不包含end
@for $i from 1 through 3 {
.item-#{$i} {
width: 1em * $i;
}
}
// 编译
.item-1 {
width: 1em;
}
.item-2 {
width: 2em;
}
.item-3 {
width: 3em;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// @each
// 格式：$var in <list>
@each $fruit in apple, banana, orange {
.#{$fruit}-icon {
background-image: url('/images/#{$fruit}.png')
}
}
// 编译
.apple-icon {
background-image: url('/images/apple.png')
}
.banana-icon {
background-image: url('/images/banana.png')
}
.orange-icon {
background-image: url('/images/orange.png')
}
4、应用外部css文件方式不同，即@import的实现方式不同
less的处理 （1）如果扩展名为.css，将文件识别为css文件 （2）其他任何扩展名都将作为less文件处理 （3）如果没有扩展名，将被附加一个.less扩展名并且作为less文件处理
scss的处理 （1）可以省略.sass或.scss文件后缀 （2）引用公共样式的scss文件要以_下划线开头，这时scss会认为是引用文件，而不会将其转成css文件
赵泽文 提交于2022-08-15 若有错误内容，敬请指正，谢谢！
公众号名称：怪味Coding
微信扫码关注或搜索公众号名称