SASS(SCSS) vs LESS：选择更适合你的CSS预处理器

SCSS（Sassy CSS）和LESS 都是 CSS 预处理器，它们都为 CSS 添加了许多强大的功能，例如变量、嵌套、混合、继承等，可以使样式表更加模块化、可维护性更高。

语法特性对比

一、变量

1. 变量声明

在SCSS中，变量以美元符号（$）开头，而在Less中，变量以@符号开头。

SCSS：

$primary-color: #333;
$font-size: 16px;

body {
  background-color: $primary-color;
  font-size: $font-size;
}

Less：

@primary-color: #333;
@font-size: 16px;

body {
  background-color: @primary-color;
  font-size: @font-size;
}

2. 变量插值

SCSS使用 #{}，而Less使用 @{}

SCSS:

$name: "John";

.selector {
  content: "Hello, #{ $name }!";
}

这将编译为：

.selector {
  content: "Hello, John!";
}

Less：

@name: "John";

.selector {
  content: "Hello, @{name}!";
}

这将编译为：

.selector {
  content: "Hello, John!";
}

二、嵌套

在SCSS中和Less中,嵌套的使用是一样的.

SCSS：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

Less：

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

三、混合

混合是CSS预处理器中用于封装一组CSS声明的功能，它允许开发者将这些声明打包到一个可重用的代码块中。

SCSS：

@mixin border-radius($radius) {
  border-radius: $radius;
}

// 参数可设置默认值
@mixin border-radius($radius:10px) {
  border-radius: $radius;
}

.box {
  @include border-radius(5px);
}

Less：

.border-radius(@radius) {
  border-radius: @radius;
}
// 参数可设置默认值
.border-radius(@radius:10px) {
  border-radius: @radius;
}

.box {
  .border-radius(5px);
}

Less混合的编译说明

// 普通混合
.mixins{
    width: 80px;
    height: 30px;
    background: red;
}
#content{
    #main1{
        .mixins   
    }
    #main2{
        .mixins
    }
}

// 编译后

.mixins{
    width: 80px;
    height: 30px;
    background: red;
}
#content #main1 {
  width: 80px;
  height: 30px;
  background: red;
}
#content #main2 {
  width: 80px;
  height: 30px;
  background: red;
}

// 不带输出的混合
.mixins(){
    width: 80px;
    height: 30px;
    background: red;
}
#content{
    #main1{
        .mixins   
    }
    #main2{
        .mixins
    }
}
// 编译后

#content #main1 {
  width: 80px;
  height: 30px;
  background: red;
}
#content #main2 {
  width: 80px;
  height: 30px;
  background: red;
}

四、函数和运算

函数和运算是CSS预处理器中用于执行计算和操作的能力，它们可以帮助开发者更灵活地处理样式数据。

1. 颜色运算

SCSS：

$color1: #333;
$color2: #666;

.box {
  background-color: $color1 + $color2;
}

Less：

@color1: #333;
@color2: #666;

.box {
  background-color: @color1 + @color2;
}

2. 数学运算

SCSS：

$width: 100px;
$height: $width * 2;

.box {
  width: $width;
  height: $height;
}

Less：

@width: 100px;
@height: @width * 2;

.box {
  width: @width;
  height: @height;
}

3. 字符串插值

SCSS：

$selector: box;

.#{$selector} {
  background-color: #333;
}

Less：

@selector: box;

.@{selector} {
  background-color: #333;
}

4. 内置函数

SCSS：

$color: #333;

.box {
  background-color: lighten($color, 10%);
}

Less：

@color: #333;

.box {
  background-color: lighten(@color, 10%);
}

5. 自定义函数

SCSS：

@function average($x, $y) {
  $average: ($x + $y) / 2;
  @return $average;
}

.box {
  width: average(10px, 20px);
}

Less：

.average(@x, @y) {
  @average: (@x + @y) / 2;
}

.box {
  .average(10px, 20px);
  width: @average;
}

五、导入

导入是CSS预处理器中用于将一个样式表合并到另一个样式表的功能，它有助于实现代码的模块化和组织。

SCSS：

main.scss：

@import "variables.scss";
@import "mixins.scss";

body {
  background-color: $primary-color;
  font-size: $font-size;
}

variables.scss：

$primary-color: #333;
$font-size: 16px;

mixins.scss：

@mixin border-radius($radius) {
  border-radius: $radius;
}

Less：

main.less：

@import "variables.less";
@import "mixins.less";

body {
  background-color: @primary-color;
  font-size: @font-size;
}

variables.less：

@primary-color: #333;
@font-size: 16px;

mixins.less：

.border-radius(@radius) {
  border-radius: @radius;
}

六、继承/扩展

继承/扩展是CSS预处理器中用于创建基于另一个选择器的选择器的功能，它可以减少代码冗余并提高代码的可重用性。

SCSS：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

Less：

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  &:extend(.message);
  border-color: green;
}

.error {
  &:extend(.message);
  border-color: red;
}

.warning {
  &:extend(.message);
  border-color: yellow;
}

七、占位符

占位符是SCSS中一种特殊的选择器，它们只在被其他选择器继承或扩展时才会被编译。这样可以避免生成不必要的CSS规则。

SCSS：

%button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
}

.button-primary {
  @extend %button;
  background-color: #007bff;
}

.button-secondary {
  @extend %button;
  background-color: #6c757d;
}

Less没有占位符功能。

八、条件语句 if-else

SCSS 支持使用 @if 、@elseif 和 @else 来进行条件判断。

SCSS

$color: yellow;
.box {
  color: $color;
  @if $color == red {
    background-color: #000;
  } @elseif $color == green  {
    background-color: #fff;
  }@else {
    background-color: #333;
  }
}

LESS 使用 when 关键字来定义条件语句。

@color: red;
.box when (@color = red) {
    color:@color;
    background-color: #000;
  }

九、循环语句 for/while/each

SCSS

@for $i from 1 to 10 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

@each $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

Less只能模拟实现类似效果

each(range(4), {
  .col-@{value} {
    height: (@value * 50px);
  }
});

输出

.col-1 {
  height: 50px;
}
.col-2 {
  height: 100px;
}
.col-3 {
  height: 150px;
}
.col-4 {
  height: 200px;
}

怎么选

其实个人认为不用纠结怎么选，实际上在项目中使用起来区别并不大

• 新项目，ui框架用什么就跟着用什么
• 旧项目，以前用什么就用什么
• 没要求的项目，根据自己团队/个人喜好使用。