CSS 功能拓展
嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器
p {
color: #00ff00;
.redbox {
color: #000000;
}
}
p {
color: #00ff00;
}
p .redbox {
color: #000000;
}父选择器 &
编译后的 CSS 文件中
&将被替换成嵌套外层的父选择器,如果含有多层嵌套,最外层的父选择器会一层一层向下传递。&必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器
属性嵌套
有些 CSS 属性遵循相同的命名空间,比如
font-family,font-size,font-weight都以font作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中。命名空间也可以包含自己的属性值
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold;
}占位符选择器 %foo
Sass 额外提供了一种特殊类型的选择器:占位符选择器。与常用的 id 与 class 选择器写法相似,只是
#或.替换成了%。当它们单独使用时,不会被编译到 CSS 文件中,必须通过延伸指令@extend调用
注释 /* */ 与 //
Sass 中有单行注释
//和多行注释/* */两种,和JavaScript的注释方式一样,但是编译之后单行注释不会保留,多行注释在压缩编译的时候,也不会被保留。我们可以对多行注释使用强制注释/*! */,表示在压缩输出模式下保留这条注释并输出到 CSS 文件中,通常用于添加版权信息。插值语句#{}也可写进多行注释中输出变量值
$version: '1.2.3';
/* This CSS is generated by My Snazzy Framework version #{$version}. */
/* This CSS is generated by My Snazzy Framework version 1.2.3. */SassScript
在 CSS 属性的基础上 Sass 提供了一些名为
SassScript的新功能。SassScript可作用于任何属性,允许属性使用变量、算数运算等额外功能。通过#{},SassScript甚至可以生成选择器或属性名,这一点对编写@mixin有很大帮助
变量 $
SassScript最普遍的用法就是变量,变量以美元符号$开头,赋值方法与 CSS 属性的写法一样。变量支持块级作用域,嵌套规则内定义的变量只能在嵌套规则内使用(局部变量),不在嵌套规则内定义的变量则可在任何地方使用(全局变量)。将局部变量转换为全局变量可以添加!global声明。可以在变量的结尾添加
!default给一个未通过!default声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
#main {
width: 5em;
}
#sidebar {
width: 5em;
}数据类型
SassScript支持 6 种主要的数据类型:
- 数字,
1, 2, 13, 10px- 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5)- 布尔型,
true, false- 空值,
null- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
运算
SassScript支持数字的加减乘除、取整等运算 (+, -, *, /, %),如果必要会在不同单位间转换值
函数
SassScript定义了多种函数,有些甚至可以通过普通的 CSS 语句调用。Sass 函数允许使用关键词参数 ,关键词参数可以打乱顺序使用,如果使用默认值也可以省缺,另外,参数名被视为变量名。
Sass 支持自定义函数。与
@mixin相同,也可以传递若干个变量给函数作为参数。一个函数可以含有多条语句,需要调用@return输出结果
插值语句 #{}
通过
#{}插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
p.foo {
border-color: blue;
}@-Rules 与指令
@import
Sass 拓展了
@import的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令@mixin都可以在导入的文件中使用。允许同时导入多个文件。导入文件也可以使用#{}插值语句,但不是通过变量动态导入 Sass 文件,只能作用于 CSS 的url()导入方式
@import 'rounded-corners', 'text-shadow';
$family: unquote('Droid+Sans');
@import url('http://fonts.googleapis.com/css?family=\#{$family}');
@import url('http://fonts.googleapis.com/css?family=Droid+Sans');@extend
@extend的作用是将重复使用的样式延伸给需要包含这个样式的特殊样式
控制指令
@if
当
@if的表达式返回值不是false或者null时,条件成立,输出{}内的代码。@if声明后面可以跟多个@else if声明,或者一个@else声明。如果@if声明失败,Sass 将逐条执行@else if声明,如果全部失败,最后执行@else声明
@for
这个指令包含两种格式:
@for $var from <start> through <end>,或者@for $var from <start> to <end>>through:[start,end] >to:[start,end)start和end必须是整数值
@each
@each指令的格式是$var in <list>,$var可以是任何变量名,而<list>是一连串的值,也就是数组列表
@while
@while指令重复输出格式直到表达式返回结果为false。这样可以实现比@for更复杂的循环,只是很少会用到
混合指令
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式
定义混合指令 @mixin
混合指令的用法是在
@mixin后添加名称与样式,混合也可以包含选择器和属性,甚至可以用&引用父选择器
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}引用混合样式 @include
使用
@include指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选)
参数
混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值
有时,不能确定混合指令需要使用多少个参数,比如一个关于
box-shadow的混合指令不能确定有多少个 'shadow' 会被用到。这时,可以使用参数变量…声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理