三者都是CSS 预处理器。
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，比css更强大，多出了(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)的写法，更容易阅读。
但是Sass的缩排语法对于web开发者来说很不直观，而且不能将css代码直接加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。Less也是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量，继承，运算， 函数. Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行 (借助 Node.js)。
他们的写法上也有差异：
声明和使用变量
LESS 采用 @ 符号，SCSS 采用 $ 符号。
在下面的示例中，我们首先在规则外声明了一个名为 link-color 的变量，然后在名为 #main 的规则内声明一个名为 width 的变量，接着把 width 变量赋值给了 CSS 的 width 属性。
LESS：
@link-color: #428bca;
#main {
@width: 5em;
width: @width;
}
SCSS：
$link-color: #428bca;
#main {
$width: 5em;
width: $width;
}
变量插值（Variable Interpolation）
LESS 采用 @{xxxx} 的形式，SCSS 采用 ${xxxx} 的形式。
示例一：使用变量插值作为 CSS 选择器
LESS：
// Variables
@my-selector: banner;
// Usage
.@{my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
SCSS:
// Variables
$my-selector: banner;
// Usage
.#{$my-selector} {
font-weight: bold;
line-height: 40px;
margin: 0 auto;
}
另外scss还支付if else语句
p{
@if 10 + 10 == 20 { border: 1px dotted; }
@if 7 < 2 { border: 2px solid; }
@if null { border: 3px double; }
}编译后的代码如下:p {
border: 1px dotted;
}网友回复
我知道答案，我要回答
私活外包
