版权声明:非经本人同意,请勿转载。 https://blog.csdn.net/QQ_Empire/article/details/82682132
Sass与Less区别
1、编译环境不一样
Sass需要安装Ruby,属于服务端处理,然而Less是需要引入官网提供和的less.js,属于客户端处理。
2、变量声明不一样
Sass/Scss 使用的是$,而Less使用的是@
// Sass
$lightColor:#baf;
// Less
@lightColor:#baf;
3、输出格式设置
Less无输出格式,Sass可以使用特定的输出格式
- nested:嵌套缩进的css代码
- expanded:展开的多行css代码
- compact:简洁格式的css代码
- compressed:压缩后的css代码
4、引入外部CSS文件
scss引用的外部文件命名必须以开头, 如下例所示:其中_test1.scss文件名如果以下划线开头的话,Sass会认为该文件是一个引用文件,不会将其编译为css文件。
5、混合不同 Mixins
sass样式中声明Mixins时需要使用“@mixin”,然后后面紧跟Mixins的名,他也可以定义参数,同时可以给这个参数设置一个默认值,但参数名是使用“$”符号开始,而且和参数值之间需要使用冒号(:)分开。
/*声明一个Mixin叫作“error”*/
@mixin error($borderWidth:2px){
border:$borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
@include error();/*直接调用error mixins*/
}
不过LESS样式中声明Mixins和Sass声明方法不一样,他更像CSS定义样式,在LESS可以将Mixins看成是一个类选择器,当然 Mixins也可以设置参数,并给参数设置默认值。不过设置参数的变量名是使用“@”开头,同样参数和默认参数值之间需要使用冒号(:)分 隔开。
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
border:@borderWidth solid #f00;
color: #f00;
}
/*调用error Mixins*/
.generic-error {
.error();/*直接调用error mixins*/
}
6、继承
sass的继承:@extend
.block {
margin: 10px 5px;
padding: 2px;
}
p {
@extend .block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}
less的继承:类似于mixins .block
.block {
margin: 10px 5px;
padding: 2px;
}
p {
.block;/*继承.block选择器下所有样式*/
border: 1px solid #eee;
}