Sass与Less笔记

概述

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

语法

1、注释
2、变量、插值、作用域
3、选择器嵌套，伪类嵌套、属性嵌套（Sass）
4、运算、单位、转义、颜色
5、函数
6、混入、命名空间（Less）、继承
7、合并、媒体查询
8、条件、循环
9、导入

注释

 当在less文件中写，// 单行注释的话，正常的css文件不会出现该注释。
 当在less文件中写，/* */ 多行注释的话，css文件中会出现该注释。 

变量

在less中是通过 @ 符号声明一个变量
在sass中是通过 $ 符号声明一个变量

例如：
less中是这样的写法：

sass中是这样的写法：

插值

less中的插值需要这样写：

sass中的插值需要这样写：

sass中不能直接像less那样把 . 写在变量里，会报错。

作用域

less中的作用域：

在上述图片中，我们可以从图片得知：
1、同作用域下，看变量最后的赋值的结果是多少，那么变量的值就是多少。
2、可以先用变量，后面声明和赋值变量。
3、如果内部的变量存在，那么就不会往外部的作用域去找变量，如果不存在才会去找。

sass中的作用域：

sass的作用域，逻辑性更强，不能先用变量再声明和初始化。
需要先声明和初始化能使用。

选择器嵌套

less下的选择器嵌套（这个选择器嵌套sass与less一样）：

伪类嵌套

less的伪类嵌套（sass也一样）：

属性嵌套

less没有属性嵌套的写法。
sass的属性嵌套的写法：

运算、单位、转义、颜色

less：

需要注意的点：
1、需要再运算符左右留出空格
2、计算的时候如果单位不同，那么两数相加之后，用的是第一个数的单位
3、有时候像margin那里那样，我们需要用 `/` 分割然后控制格式，但是，由于运算的原因被识别成了运算，这时候，我们需要用符号转义。

sass：

1、sass中不同的单位不进行运算
2、sass中，像11行的内容，默认不进行运算，如果需要运算，那么需加上一个括号。

函数

less自带函数（sass的用法也一样，只不过两个自带的函数有些不同，详情，可以看对应的函数手册）：

自定义函数：

sass

混入

less混入操作：

sass混入操作：

命名空间(less)

命名空间只有less有

继承

less的继承操作：

less里面使用继承必须是编码后css里面存在的样式才能继承。

sass的继承操作：

下面是稍稍修改了以下的代码：作用是css中不产生box的代码，只用于被继承。

合并

less的合并操作：

sass的合并操作：

媒体查询

媒体查询，less和sass写法差不多

条件

less的条件操作是：

sass的条件操作是：

循环

less中的循环操作（递归）：
由于是递归，所以倒着输出。

sass中的循环操作：

导入

less和sass的操作是一样的，只不过引入的文件应该与自己的语言相同。
导入操作：