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

2026/8/3 23:50:30 拓冰建站浏览量

变量(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命令不够灵活。不能向它传递参数，它原本是啥样就是啥样.
2. 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到浏览器。

建站实战干货