sass学习——SassScript

1.SassScript变量声明

——SassScript的变量以“$”开头：

$width: 5em;

2.变量调用

——嵌套规则内的变量只能在规则内使用，嵌套规则外的变量可被其他规则调用

#main {
	width: $width;
}

3.SassScript数据类型

——SassScript 支持六种不同的数据类型，有数字（包括有单位，如px的和无单位的），字符串（双引号，单引号，无引号），颜色，空值，布尔型（null），值列表（用空格或逗号分开）；同时SassScript也支持css属性，并将他们视为无引号字符串(unquoted strings)

字符串：SassScript在编译css文件时不会改变其类型，除了使用插值语句#{ }，将有符号字符串编译为无符号字符串；

——字符串间可通过“+”来连接，有引号字符串（+ 左侧）连结无引号字符串，运算结果有引号的，无引号字符串（+ 左侧）连结有引号字符串，运算结果则没引号。

——在文本字符串中 #{ } 插值语句可以被用来添加动态的值：content: "I ate #{5 + 10} pies!"; ==> content: "I ate 15 pies!"; 空的值被视作插入了空字符串;

布尔型：SassScript 支持布尔型的 and or 以及 not 运算。

值列表：是指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。

——独立的值也被视为值列表——只包含一个值的值列表。

——值列表中可以包含值列表，若使用同样的分隔方式要用括号分隔开

——如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px

——不支持任何运算方式，只能用function控制

nth function 可以直接访问值列表中的某一项

join function 可以将多个值列表连结在一起

append function 可以在值列表中添加值

@each rule 则能够给值列表中的每个项目添加样式

颜色：SassScript中颜色可进行运算，颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

——数字与颜色值之间也可以进行算数运算，分成3个两位分别与数字进行运算

——颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

4.SassScript运算符

相等运算符 == 或 !=，所有数据类型都支持；

数字运算符 (Number Operations)：加减乘除、取整等运算 (+, -, *, /, %)，可在不同单位间转换

——SassScript中的"/"有分割数据和除法的功能，默认是分隔数据，视为除法的三种情况：

1.值或值的一部分是变量；$width/2;

——若需要使用变量又不要做除法运算可用#{ }包裹变量，即#{$font-size}/#{$line-height};

2.值被括号包裹；(500px/2); 

3.值是算术表达式的一部分；5px + 8px/2px

布尔运算 (Boolean Operations)符： and or 以及 not ；

关系运算符 <, >, <=, >=；

括号：影响运算顺序；

5.插值语句：#{ }

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

使用 #{ } 可以避免 Sass 运行运算表达式，直接编译 CSS;

$font-size:12px;
$font-height:30px;
$name:foo;
$attr:font;

p .#{$name}{};
#{$attr}-size:12px;
font:#{$font-size}/#{$font-height};

6. 变量定义 !default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

!default添加在变量的结尾，如果该变量还未赋值，这将该值赋值给这个变量，若变量已被赋值，则变量的值为原来的值

$content: null;
$content: "Non-null content" !default;

若变量为空值null时，将被 !default定义的变量赋值