sass和less（六十四）

sass和less介绍和环境搭建

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

官网地址：http://lesscss.org/

Vscode插件：Easy Less 直接在扩展安装就行

Hbuilder-x插件：工具->插件安装->安装新插件->前往插件市场安装->选择less安装->安装成功（可以返回刚刚的插件安装查看已安装插件是否安装成功，需要等待一下。或者查看右下角提示）。

Hbuilder-x插件：实现热更新功能，工具->外部命令插件配置->compile-less->package.json->更改：“onDidSaveExecution”: true->保存，关闭重启hbuilder

如果Hbuilder-x插件安装过程中出现错误：请查看https://ask.dcloud.net.cn/m/article/35468
Sass：
官网地址：http://sass-lang.com/

VSCode插件：Easy Sass

Hbuilder-x插件：sass（与less安装一样）

sass和less语法

分号：

分号一定不能少，除了{}后面可以不用分号和{}内部最后一个表达式可以不使用，其他表达式都要使用

注释（无差异）

// 单行注释不会被编译出来的。

/* …*/ 多行注释，就是CSS的注释方式 。会被编译出来的
sass：

less：

变量，插值，作用域（有差异）

变量：

sass：使用$符号 $name: 变量值;

less：使用@符号 @name：变量值；

插值：

sass：

定义插值：$name:值； 使用：#{$name}

less：

定义插值：@name:值； 使用：@{name} 随便在任何内容中插入（包括属性，标签…），只要使用规范就行

作用域：

sass：向上查找最近原则（不存在变量提升）

less：上下查找最近原则（变量提升）

选择器嵌套（无区别），伪类嵌套（无区别），属性嵌套（Sass）

选择器嵌套

sass选择器嵌套：

Less选择器嵌套：

伪类嵌套

sass伪类嵌套：

less伪类嵌套：

sass和less上面存在的一个小问题，就是我们平常写伪类一般是ul:hover没有空格的，但是上面两张图都存在空格。可以使用&符号去除空格（sass和less一样）

sass属性嵌套

sass属性嵌套：（仅sass可用） 用 ：隔开

运算、单位、转义、颜色

单位：（有区别）

less：当两个数进行运算时，会以第一个数的单位为准

sass：当单位不同时是不可以进行计算的，否则控制台会报错

转义：（有区别）

如果想要实现除法，那么可以将表达式用括号（）括起来。
注意：一个表达式只用写一个单位，多个单位，会直接忽略单位，而只有单纯数值

less：使用 ~ ’ … ’ 保存计算符号，不进行计算
注：font比较特殊，中间出现/不会被识别为 运算符号，只会识别为分割线

颜色：（无区别）

sass：

less：颜色数值也可以进行运算

函数：有许多内置方法是一样的，但也有一些区别比如random（）只在sass起作用

sass：

less：

sass自定义函数（我在hbulid实现不了，好像他的插件不支持，所以只能够用vscode给大家演示了）

less不具备自定义函数功能

混入，命名空间（Less），继承

混入

sass：定义 @mixin name{} ； 引入@include name

混入的css样式不会被渲染在css页面当中，（）还能实现传参功能

less：

不带括号和带括号的区别在于：不带括号定义时的混入会渲染在css文件中，没带括号就不会将css中渲染出来没并且还能传参。

命名空间：（仅less）

继承：（区别）

混入存在一个问题就是，如果多个选择器混入都是同一个，那么在生成的css文件中，也会形成多个选择器分开。造成代码冗余。

因此我们要解决整个问题就是就是可以选择用让他们变成组合选择器。

sass：定义.name{} 引入 @extend .name

如果不想在css文件中引入混入的选择器，那么可以在scss文件中将选择器 .换成%

Less: 定义：.name{} 引入 &:extend(name)

less无法在css文中忽略让继承的混入忽略。

合并（有区别），媒体查询（无区别）

合并

sass：

逗号合并 定义： $name : (键名：属性值，键名：属性值…); 引入：属性：map-values（$name）。

空格合并： 定义： $name : (键名：属性值，键名：属性值…); 引入 ： 属性名：zip（map-values($name)...）别忘了分号和引入是那三个点

less：逗号合并 属性名+：属性值；空格合并 属性名+_:属性值

媒体查询：（无区别）

条件（有区别），循环

条件（有区别）

sass：@if @else

less： .name when(){}

循环：

sass：@for $变量名 from 起始数值 through 结束数值（包含）{…}

less：递归

导入（无区别）

css本身是不具备模块化的，但是像sass和less能够将某个功能写成一个单独的文件，然后可以互相引入。实现多功能合并

我们可以在html引入其他的css文件，但是无法在css文件中引入其他的css文件。但是sass和less可以实现
sass：

less：