Sass vs Less - 码农教程

2007年发布，最早的一款CSS预处理器，带来了变量、常量、嵌套、混入、函数、循环等功能，解决了CSS不可编程的短板。由于浏览器不能直接识别Sass，所以需要预先编译。

Sass有两套语法规则：

  1. 缩进式  2. 大括号

less

2009年，受Sass影响，但使用的CSS语法，可以快速上手。它也有上面说的一些功能。

下面对比一些常用功能：

变量

变量是代码最小的复用单元，可以减少硬编码。

sass

$color: blue;body{    $color: black;    color: $color;}

less

@color: blue;body{    @color: black;    color: @color;}

提到变量，就不得不提作用域。

$color: black;.scoped {    $bg: blue;    $color: white;    color: $color;    background-color:$bg;}.unscoped {    color:$color;}

sass在这里还是有点小问题的:

3.4.0之前：

.unscoped{    color: white}

之后：

.unscoped{    color: black;}

后声明的变量总是会覆盖之前声明的变量，不管之前变量在何处声明。也就是变量都是全局的，谁在后面谁是老大。

3.4.0（包括）之后，修正了这个问题：

All variable assignments not at the top level of the document are now local by default. If there’s a global variable with the same name, it won’t be overwritten unless the !global flag is used. For example, $var: value !global will assign to $var globally. This behavior can be detected using feature-exists(global-variable-shadowing).

大概：变量不再是全局，而默认是局部，除非给变量声明时，加上 !global。

less就没有这个问题，作用域很像其他编程语言。

嵌套

sass/less 官都提到了写出的样式和 HMTL 的结构更加相像，层级很明了。

html

<nav>    <ul>        <li>            <a></a>        </li>    </ul></nav>

sass / less

nav{    ul{        li{           a{           }         }    }}

其实这样嵌套深了也不一样好，毕竟最后也会转换为CSS，会导致选择器很长，从性能、代码体积上都会有损失。个人认为 3 到 4 层嵌套就可以了，或者上面的也可以写成：

nav{    ul{    }    li{    }    a{    }}

混入

一个规则集合可以导入到另一个规则集合，或者可以说大块的代码复用。适用场景：我们在写 CSS3 时，要加很多前缀（当然现在有好多工具可以自动添加）。

sass

@mixin border-radius($radius:10px) {  -webkit-border-radius: $radius;     -moz-border-radius: $radius;      -ms-border-radius: $radius;          border-radius: $radius;}.box {     @include border-radius(10px); }

less

.border-radius(@radius:10px){  -webkit-border-radius: @radius;     -moz-border-radius: @radius;      -ms-border-radius: @radius;          border-radius: @radius;}.box{    .border-radius(5px);}

sass 有严格的声明和引用语法：@mixin，@include，而less 就松散很多，同时less还有个问题：

.mixin{    color:red;}.other-mixin(){    background:blue;}.class{    .mixin;    .other-mixin;}

output

.mixin{    color:red;}.class{    color:red;    background:blue;}

就是你在使用 mixin 时，不加小括号会把 mixin 也输出。因为 less 的编译器不知道你是在声明 mixin 还是在声明普通的选择器。

函数

sass/less 都各自内置了一些函数：Color、String、List、Math、Type等

sass/less

@base: #f04615;@width: 0.5;.class {   width: percentage(@width); // returns `50%`   color: saturate(@base, 5%);}

output

.class {   width: 50%;   color: #f6430f;}

最好的例子应该是 REM 布局中的 px2rem 函数了：

$baseFontSize:100px !default;@function px2rem( $px , $base-font-size: $baseFontSize ){    @if (unitless($px)) {        @return px2rem($px + 0px);    } @else if (unit($px) == rem) {        @return $px;    }    @return $px/($base-font-size) * 1rem;}.body{    font-size:px2rem(100)}

导入

sass/less

 @import "reset.css" @import "reset" // reset.less / reset.scss

运算

四则运算

+ - * /

sass

$conversion-1: 5cm + 10mm; // result is 6cm$conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

less

@conversion-1: 5cm + 10mm; // result is 6cm@conversion-2: 2 - 3cm - 5mm; // result is -1.5cm

单位也是参与计算的

继承

sass

.message{    border:1px solid #ccc;}.success{    @extend .message;    border-color:green;}.error{    @extend .message;    border-color:red;}

output

.message, .success, .error {    border: 1px solid #ccc;}.success {    border-color: green;}.error {    border-color: red;}

less （1.4.0加入）

.message{    border:1px solid #ccc;}.success{    &:extend(.message);    border-color:green;}.error{    &:extend(.message);    border-color:red;}

output

.message, .success, .error {    border: 1px solid #ccc;}.success {    border-color: green;}.error {    border-color: red;}

注：extend 和 mixin 有时可以达到同样的功能，但是从语法和输出后的代码上还是有些区别的。

extend生成的代码更紧凑、更符合预期。