sass学习——SassScript

来源:互联网 发布:腾讯java工程师面试题 编辑:程序博客网 时间:2024/03/29 04:49

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定义的变量赋值