Less与Sass使用

less and sass

Posted by Bryan on December 9, 2018

基础概念

有前端开发的小伙伴都或多或少接触过Sass和Less,由于CSS功能比较弱,代码的复用性比较弱,为了更方便地编写CSS,程序员们想到可以更方便的文件设计样式,然后再转换为CSS。这种方式就成为CSS预处理。而Less和Sass就是目前最流行的CSS预处理文件。

这两种方式实现的功能类似,都具备如下所示的基础功能增强:

  • 变量,CSS不支持变量,导致相同的数值需要复制粘贴,采用Less或Sass就可以指定变量,重复的地方直接使用变量即可
  • 混合,CSS无法实现样式代码的复用,使用Less和Sass可以复用Class的样式
  • 继承,CSS无法实现样式的继承,而Less和Sass可以更好地继承另一个Class的样式
  • 嵌套,Css中嵌套的指定比较麻烦,而且不直观,使用Less和Sass可以改善这种情况
  • 运算,Css中不支持数值的运算,使用Less和Sass可以支持比较丰富的数学运算

Less 语法

下面对Less相关功能的语法进行介绍:

变量

Less使用@ 字符指定变量,使用方式如下所示:

@color: #4D926F;

h2 {
  color: @color;
}

混合

Less可以将一个定义好的Class引入另一个Class中,从而达到样式的复用,同时支持参数的调用,类似其他语言中方法调用的效果,代码如下所示:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

在上面的代码中,#header#footer 都复用了rounded-corners 的样式,其中#header 使用的是默认值参数5px, 而#footer 使用指定的参数10px ,最终转换为CSS代码如下所示:

#header {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#footer {
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}

继承

Less如果希望在Class中继承另一个Class的样式,可以采用与混合功能一样的实现方式,直接将被继承的样式直接加入即可,代码如下所示:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

.content {
    .rounded-corners;
    font-size: 20px;
}

嵌套

在原始的CSS中,每个嵌套方式需要一一指定,导致写起来很繁琐,而且不直观,在Less中可以直接按照层次写即可。代码如下所示:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

而转换为CSS后,对应的代码如下所示:

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}

可以看到在Less中,可以直接在{} 中增加样式即可表示层次关系,而且层次关系可以循环嵌套下去,而CSS中则相当繁琐,需要一层一层指定下去。

运算

在Less中,可以直接对数值进行运算,大大方便开发者。代码如下所示:

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-right: @the-border * 2;
}

Sass 语法

Sass包含两种文本格式,一种是.sass 格式的,采用python类似的严格缩进,不使用{} 作为分隔符。一种是.scss,采用{} 进行分隔,是标准的CSS语法。.scss 是Sass最新的默认格式。后续介绍也都以此格式进行介绍。

变量

Sass使用$ 字符指定变量,代码如下所示:

$color: #4D926F;

h2 {
  color: $color;
}

混合

Sass中可以将一些公共样式进行复用,也支持指定参数。在使用中,需要使用@mixin 参数指定复用的样式,并使用@include 进行引用,代码如下所示:

@mixin rounded-corners ($radius: 5px) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
}

#header {
  @include rounded-corner();
}
#footer {
  @include rounded-corners(10px);
}

继承

Sass中可以继承另外一些样式的代码,在Sass中可以使用@extend 继承样式,代码如下所示:

.rounded-corners {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}

.content {
    @extend .rounded-corners;
    font-size: 20px;
}

可以看到Less中混合和继承使用相同的实现方式,而Sass中继承和混合采用不同关键字进行实现,看起来功能比较类似,比较两者的区别可以参考Gloria的博客

嵌套

对于嵌套的语法,Sass与Less基本一致,实现的代码如下所示:

#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p { font-size: 12px;
    a { text-decoration: none;
      &:hover { border-width: 1px }
    }
  }
}

可以看到,与Less语法一致。

运算

进行通用运算,基本的算法与Less也相同,代码如下所示:

$the-border: 1px;
$base-color: #111;

#header {
  color: $base-color * 3;
  border-right: $the-border * 2;
}

可以看到,基本的运算操作基本一致

总结

最后比较下来,Less和Sass都对CSS的痛点进行了修复,在一般场景下也都能很好地满足需求。从语法层面上看起来,Less的语法相对简单,而Sass的语法设计更严谨,也更复杂一些。因此,一般情况下,项目选择其中一种进行CSS的预处理都Ok,但是从市场上的风向来看,Sass看起来更受欢迎一些,之前一直使用Less的Bootstrap也切换到了Sass,因此,如果新项目的话,建议还是跟着市场走选择Sass,老项目的话也不必急着切换,Less也是够用的。