规则上相同
- 变量
- 嵌套规则
- 导入
- 混入
- 运算
- 注释
- 函数 写法类似于script、也有一些指令
规则和写法上相同的地方
-
变量 变量也都支持块作用域,类属于js的那
css@var: red; #page { @var: white; #header { color: @var; // white /**/ } }
- less的变量是使用@ ,@width
- sass是使用 <math xmlns="http://www.w3.org/1998/Math/MathML"> , , </math>,width
css@width: 10px; @height: @width + 10px; #header { width: @width; height: @height; }
-
嵌套规则(&,嵌套属性)
css#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
-
导入
- @import 可以是less、scss、css文件的导入
-
混入(将一个规则集集合混入到另一个规则集集合中)
- Less
css.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered(); // 混入规则集及 } .post a { color: red; .bordered(); } /* 也可以类似于函数的方式使用*/ .some .selector div { .mixin(#008000); }
- sass 需要使用
@mixin
定义,然后在使用@include
导入规则集
css@mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners; /* 也可以类似于函数的方式使用*/ @include rounded-corners(#000); }
-
运算
- less
css@conversion-1: 5cm + 10mm; // 结果是 6cm
- sass
css$conversion-1: 5cm + 10mm; // 结果是 6cm color: #222 / 2 /* color : #111*/
-
函数(内置很多函数,也可以类似于混入中的函数方法来使用)
- less (函数)
css$conversion-1: 5cm + 10mm; // 结果是 6cm color: #222 / 2 /* color : #111*/
- sass (SassScript)
css$conversion-1: 5cm + 10mm; // 结果是 6cm color: #222 / 2 /* color : #111*/
规则上不相同的
-
less
- 转义
css@min768: ~"(min-width: 768px)"; /* ~ 是转义标志符号*/ .element { @media @min768 { font-size: 1.2rem; } }
- 映射 maps
css#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; /* = colors.primary 这样的方式 */ border: 1px solid #colors[secondary]; }
-
sass
-
继承
-
内置控制指令
@if @each @else @while @foreach
-
区别:
- less是支持客户端和服务端使用,而sass是支持服务端运行,目前基本上是都通过构建工具进行预处理之后,直接以css的在客户端展示。
- sass算是最早出现的预处理器,有更强大的社区和实践方案、使用案例更多
- sass内置的规则也相对比较多