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

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

Less 语法

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

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

@color: #4D926F;
  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 {
    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也是够用的。