Sass 基础

声明变量 $变量名称:变量值; 使用变量 直接通过 $变量名称 使用变量中存放的值即可

/* $primary_color:#eee; */

body{
    color:$primary_color;
}

二者都是CSS预处理器。是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。

1、Less：

是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。

Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。

为什么要使用它们？ 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。这个不用多说，封装对浏览器语法差异的重复处理，减少无意义的机械劳动。 可以轻松实现多重继承。

2、Sass：

是一种动态样式语言，Sass语法属于缩排语法，

比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

Sass与Scss是什么关系? Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

二、less和sass的相同之处 Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class； 2、参数混入——可以传递参数的class，就像函数一样； 3、嵌套规则——Class中嵌套class，从而减少重复的代码； 4、运算——CSS中用上数学； 5、颜色功能——可以编辑颜色； 6、名字空间(namespace)——分组样式，从而可以被调用； 7、作用域——局部修改样式； 8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

三、less和sass的区别 Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。 Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。