scss

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

让 css 从标记语言变得更像编程语言

 

Sass语法:

1.嵌套规则

代码可以嵌套在另一段代码中，内层的样式将它外层的选择器作为父选择器

避免了重复输入父选择器，让CSS的结构易于管理

2.父选择器

用 & 表示父选择器

编译后的CSS文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递

& 必须作为选择器的第一个字符，其后可以跟后缀生成复合的选择器

 

3.属性嵌套，注释

有些CSS属性有相同的前缀（font-size，font-family，font-weight），可以把前缀提取出来，且前缀后面可以继续写自己的属性值

 支持单行注释 // 和多行注释 /**/ 　

多行注释可以完整的输入到编译后的CSS文件中，而单行注释不会

因为注释有中文，所以会添加@charset "UTF-8" 来指定字符集，没有中文就不会添加这一行

注释支持变量

 

4.变量

变量以美元 $ 开头，复制方法与CSS的复制方法一致

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可以在任意地方使用（全局变量）

将局部变量转为全局变量可以添加 ！global声明

 

 5.数据类型（了解）

1. 数字，1, 2, 13, 10px
2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型，true, false
5. 空值，null
6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

也支持其他 CSS 属性值，比如 Unicode 字符集，或 ！important声明。然而 Sass 不会特殊对待这些属性值，一律视为无引号字符串。

 

6.字符串

有引号字符串 ，如 "Lucida Grande" 'http://sass-lang.com'

无引号字符串 ，如 sans-serif bold，在编译 CSS 文件时不会改变其类型。

只有一种情况例外，使用 #{} 时，有引号字符串将被编译为无引号字符串，这样便于在 mixin 中引用选择器名

 

7.数字运算

支持数字的加减乘除、取整等运算（+、-、*、/、%），如果必要会在不同单位之间转换值

不同单位的值运算结果参考第一个值的单位

 

8.除法运算

/ 既可能是分隔符。也可能是除法

如果既想使用变量，又想把 / 当成分隔符，可以使用#{}语法

 

9.颜色运算

分段计算，分别计算红色、蓝色、绿色的值

如#010203 + #040506 = #050709

数字和颜色也可以进行计算，同样分段

如#010203 * 2 = #020406

如果颜色表示为rgba，则必须拥有相同的透明度才能计算，因为透明度值alpha不参与运算

颜色的alpha可以通过opacity或transparentize两个函数进行调整

 

10.字符串运算

+ 可以连接字符串，生成的结果是否有引号取决于左边的字符串是否有引号

运算表达式与其他值连接时，用空格做连接符如：margin：3px + 4px auto

在有引号的文本字符串中使用#{}插值可以添加动态的值如：$value:15   content:"我叫小明，今年#{$value}岁"

 

11.圆括号

圆括号可以影响运算的顺序

 

12.函数

支持函数，rgb（）会计算出对应的颜色

lighten（）颜色变浅。darken（）颜色变深

 

13.插值语句

通过#{}插值语句可以在选择器或属性名中使用变量

使用#{}可以避免运行运算表达式

 

 14.引入语法

如果需要给定义的变量赋不同的值，可以编写不同的scss文件赋值，使用时用 @import 'scss文件路径引入

如果不需要让该文件编译，可以在其名字前加上_作为前缀

据此可以将项目进行拆分

 

15.mixin（混入）

@mixin指令允许我们定义一个可以在整个样式表中重复使用的样式，类似于代码段

@include指令可以将mixin引入到文档中

如：字数超过限制通常用省略号表示，通常用以下代码表示

div {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@import只能导入一段完整的代码

此时可以使用@mixin

 

@mixin也可以与@import配合使用

将@mixin单独做成一个scss文件，再使用@import引入需要使用的scss文档，使用@include导入

 

同时，相同属性的不同属性值，也可以使用函数赋值