Sass与Less区别

版权声明：非经本人同意，请勿转载。 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;
}