带你了解 Sass 和 Less 的不同

前言

Sass 和 Less 都是CSS的预处理器，其基本思想就是用编程的思路编写CSS代码。增加了变量，嵌套，函数，语句，继承等概念。有助于模块化开发，只需要改变变量，就可以获取到一套不一样的css 。最后 Less 文件和 Sass 文件都会生成css文件。

变量符

• sass 使用 $ 定义
• less 使用 @ 定义

$font_color: red;
.sass_tip {
    color: $font_color;
    font-size: 30px;
}

@font_color: red;
.less_tip {
  color: @font_color;
  font-size: 20px;
}

变量名

• sass 使用 $ 定义好变量，填入属性名的时候使用 #{}，里面包含变量
• less 使用 @ 定义好变量，@{}里面包含定义好的变量

$left: left;
.sass_tip {
  padding-#{$left}: 10px;
}

@colorName: color;
.less_tip {
    @{colorName}: blue;
}

嵌套

• sass 的 css 名嵌套使用，结构层级清晰明了，伪类使用 &:
• less 的嵌套使用跟 sass 一样，伪类也是使用 & 开头

.sass_box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  .sass_tip {
    font-size: 20px;
    color: blue;
    &:hover {
      color: black;
    }
  }
}

.less_box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  .less_tip {
    font-size: 20px;
    color: blue;
    &:hover {
      color: black;
    }
  }
}

混合(Mixins)

• sass 使用 @mixin 定义，@include 使用，可传入参数并定义默认值
• less 使用 .style 定义，.style 使用，可传入参数并定义默认值

@mixin tipStyle($color: red) {
  font-size: 20px;
  color: $color;
}
.sass_tip {
  @include tipStyle(blue);
}

.tipStyle (@color: red) {
  color: @color;
  font-size: 20px;
}
.less_tip {
  .tipStyle(blue);
}

条件语句

• sass 支持使用 if、else、for、while等语句
• less 暂不支持使用

// 条件语句
.sass_tip {
  @if 10 > 1 { color: blue; }
}

// if else 语句
.sass_tip {
    @if 1 {
      color: red;
    }@else if 2 {
      color: blue;
    }@else {
      color: white;
    }
}

继承

如果一个元素的样式和另一个元素的样式完全一样，这个元素无需再写一遍重复的样式，使用继承就可以把另一个元素的所有样式全部继承过来

• sass 继承使用 @extend 后面加上要继承的 class 名
• less 继承可以在 css 名后面拼接:(.要继承的 class 名)，或者属性内写 &:extend(.要继承的 class 名);

.sass_text {
  font-size: 20px;
  color: blue;
}
.sass_tip {
  @extend .sass_text;
}

.less_text {
  color: blue;
  font-size: 20px;
}
.less_tip:extend(.less_text) {
  margin-top: 10px;
}

// 另一种继承方式
.less_tip {
  &:extend(.less_text);
}

运算

sass 和 less 都可以直接使用 + - * / 等符号进行运算

.sass_tip {
    font-size: 100-50px;
  }

.less_tip {
  font-size: 100-50px;
}

作用域

• sass 作用域的查找方式与javaScript基本相同,，也是由内层向外层查找
• less 的作用域如果父级没有，则往全局寻找，如果父级有，则优先选择父级的变量

$font_color: red; // 全局
.sass_box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  $font_color: blue; // 父级
  .sass_tip {
    color: $font_color;
  }
}

@font_color: red; // 全局
.less_box {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  @font_color: blue; // 父级
  .less_tip {
    color: @font_color; // 优先使用父级
  }
}

总结

总的来说 Sass 和 Less 能让我们编写 css 变得更加顺畅，于常规的 css 比较多了模块化、变量、继承等丰富的功能，它们之间的区别最大就是语法方面的不同，相对之中 Sass 会更加成熟，热度也高，而 Less 使用上手较简单些。