Sass和Less学习

超清晰的Sass和Less对比----前端第四弹

白日莫空过，青春不再来

Sass和Less都属于CSS预处理器，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言,为CSS增加了一些编程的特性，如：变量、语句、函数、继承等概念。将CSS作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作

（在大型项目可以添加css预处理器，可以更加写好我们HTML与css）

首先先安装Sass与Less

LESS：官网地址：http://lesscss.org/ VScode插件：Easy LESS

SASS: 官网地址：https://sass-lang.com/ VScode插件：Easy Sass

在vscode上新建这两个文件（sass老式写法是：testcss2.sass）

往里面写入一些代码，保存之后会自动生成css文件

红线上面的是less生成的css，红线下面的是sass生成的一个min版的css，一个完整版的css文件

注释方法

sass与less注释：单行注释//，不会被编译出来，多行注释/ /，会被编译出来

定义变量

• less定义变量：通过@+name来进行定义变量

• sass定义变量：通过$+name来进行定义变量

插值

就是将定义的某个值放到某个位置，而不是只能做变量的值

• less方法：

• sass方法：
  

作用域

有两个相同的变量定义了，最近原则，找最近的变量

• less作用域：最近原则，离使用变量最近的那一个就可以了

• sass作用域：按顺序，定义变量要在使用变量的前面，然后再根据最近原则；如图所示

嵌套选择器

由于一般css样式写法都是要一个个写，但预处理器可以通过嵌套的方式减少重复率

• less嵌套和sass嵌套都是一样的

• sass嵌套：less嵌套和sass嵌套都是一样的

伪类嵌套

伪类嵌套只需要在你想加的选择器中的括号内加入即可，而如果没有&则代表是它的子元素

（less和sass写法都是一样的）

例如：

属性嵌套

属性也可以做成嵌套的形式，但是less是没有这种属性嵌套的功能

例如：

运算

• less运算：加减乘除

几个注意的地方：加法：看最前面的单位，最前面为px则会将后面不同单位的转化为px然后再加

除法：有时候我们想要/，但不想除，那么就可以在前面加上~"‘’

• sass运算：

sass加法中**，如果单位不同是不能进行运算的**

sass中单独一个/代表分隔符，而（a/b）代表除法

函数

有自定义函数与内置函数，round()、percentage()等内置函数，less与sass的内置函数库并不是一样的；但是只有sass才能自定义函数

sass函数：

混入

将不同的css混合在一起

• less混入，如果加上（）就不会产生这一个类，但是可以往test3（）里面传入参数，如图2

命名空间（Less）

只有less有命名空间，当有两个混入，就优先为全局定义的

• sass混入

继承

可以继承其它class选择器的css属性

• less继承：

• sass继承：

当在class选择器加上%就不会生成这一个选择器，只是单纯用来继承，如图2

合并

把多个值合成在一起

less合并：

+代表用,分割开；+_代表空格分隔开

sass合并：

媒体查询

less与sass的媒体查询方式都是一样的

条件

• less条件语句

• sass语句

循环

• less循环语句

• sass循环语句

导入

将其它同文件的代码引入进来，一起生成一个css文件

less与sass导入方法是一样的