Scss和less预处理器的使用对比

变量(Variables)

scss变量标识符是：$

复制代码

$primary-color: red;
div {
	background: $primary-color;
}

less变量标识符：@

复制代码

@primary-color: red;
div {
	background: @primary-color;
}

变量名称规则：scss下划线和横线相互兼容, less中定义的名称和使用名称保持一致，否则报错

嵌套(Nesting)

复制代码

#content {
    color: #333 ;
    p {
        margin-bottom: 1.4em; 
        a {
           vertical-align: top;
           &:hover {
				color:#fff;
            }
        }
     } 
}

1.内层的样式将它外层的选择器作为父选择器

2.父选择器 &编译后的 CSS 文件中 &将被替换成嵌套外层的父选择器(一般在伪类中)

3.属性嵌套

复制代码

.aside { 
    font: { 
      family: '微软雅黑'; 
      size:  30px;
      weight:  bold; 
    }
 }

混合（Mixin）

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。(大段大段的重用样式)

复制代码

// Scss中
@mixin   bordered { 
    border: 1px dotted  black;
    background:#fff;  
    color: #666;                                                                                   
}
.menu  { 
    font-size:16px;
   @include  bordered; 
} 

// less中
.bordered { 
     border: 1px dotted  black;
     background:#fff;       
     color: #666;                                                            
}
.menu  { 
    font-size:16px;
    .bordered(); 
}

混合-传参（Mixins）

复制代码

// Scss中
@mixin linkColors($normal, $hover, $visited) {                                         
      color: $normal;
      &:hover { 
         color: $hover; 
       } 
      &:visited {
        color: $visited; 
     }
 }
a { 
    @include linkColors(blue, red, green); 
}

// Less中
. base-colors(@bg,@color) {
    color: @color; 
    background: @bg；
} 
.class1 {  
    .base-colors(#fff,#33acfe); 
}

延伸（extend）

复制代码

// Scss中
.error { 
     border: 1px #f00;
     background-color: #fdd; 
} 
.seriousError {
     @extend .error;
     border-width: 3px;
 }

// Less中
.danger {
    color: red; 
}
#menu {
    &:extend(.danger); 
     background: blue; 
}

Mixin和extend效果相似，使用区别是：

1.extend命令不够灵活。不能向它传递参数，它原本是啥样就是啥样.

mixin主要的优势就是它能够接受参数。在大作数情况下mixin会比extend更好。

运算(Operations)

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位(如px和cm之间)。

以下为less举例：
@conversion1: 5cm + 10mm; // 6cm，所有操作数被转换成相同的单位
@conversion2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@base: 5%;
@filler: @base * 2; // 10%
@other: @base/2; // 2.5%
@color: #224488 / 2; //#112244

函数(function)

Scss可自定义函数，无内置函数；

使用@function定义函数，@return返回结果；调用时可传参；

复制代码

$grid-width: 40px;
@function   gridWidth($n) {
     @return  $n * $grid-width；
 } 
#sidebar {
     width: gridWidth(5);
 }

Less本身无自定义函数,有内置函数；

作用域(scope)

Scss和Less 中的作用域与 CSS 中的作用域非常类似。(从自身往上找)

例：在less中

复制代码

@primary-color: red;
 #page { 
         @primary-color:blue ;
         #header {
           color: @primary-color; // blue;
        }
 }

导入(import)

Scss扩展名省略(.scss和.sass)
@import "public"; //public.scss 或public.sass

Less扩展名省略(.less)
@import "public"; //public.less

注释（Comments）

Scss和less 均支持 CSS 多行注释 /* */和单行注释 //，多行注释会被完整输出到编译后的 CSS 文件中，而单行注释编译后则不显示；

映射（maps）-less独有

将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用（less3.5后）。

复制代码

#colors() {
   primary: blue; 
   secondary: green; 
}
 .button { 
    color: #colors[primary]; 
    border: 1px solid #colors[secondary]; 
}

其它区别

编译环境不一样: Sass的安装需要Ruby环境，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出css到浏览器。