Sass学习笔记
Sass是对CSS语言的扩展，为其提供了：变量、嵌套规则、混入、内联（inline）导入等语言特性。
Sass具有两套语法风格。
一种是旧的、基于缩进的语法风格，通常称为Sass，扩展名.sass 。这种语法风格使用缩进而不是代码块来表示嵌套规则，使用换行符而非分号来分隔属性，因而比较简洁。
另一种是新的、基于代码块的语法风格，通常称为Sassy CSS，扩展名.scss 。符合CSS3语法的文件都可以是SCSS文件。
使用命令行，可以在这两种格式进行转换：
|
1 2 3 4 5 |
# 将SASS转换为SCSS格式 sass-convert style.sass style.scss # 将 SCSS转换为SASS格式 $ sass-convert style.scss style.sass |
本文主要使用SCSS的语法风格。
Sass命令行基于Ruby语言开发，你需要先安装、配置好Ruby环境 。然后执行：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
# 安装Sass命令行工具 gem install sass # 转换为标准CSS文件 sass input.scss output.css # 指定输出风格： # nested：嵌套缩进的CSS代码，默认值 # expanded：没有缩进的、扩展的代码代码 # compact：简洁格式的代码代码 # compressed：压缩后的代码代码，用于生产环境 sass --style compressed test.sass test.css # 监控文件的改动并自动更新 sass --watch input.scss:output.css |
本章内容介绍Sass对标准CSS语言的扩展，Sass的某些特性与未来的CSS 4规范是兼容的。
Sass允许一个CSS规则嵌套编写在另外一个规则的内部，这样可以避免重复书写父选择器：
|
1 2 3 4 5 6 7 8 9 |
#main p { color: #00ff00; width: 97%; // 嵌套规则 .redbox { background-color: #ff0000; color: #000000; } } |
转换后的CSS为：
|
1 2 3 4 5 6 7 8 |
#main p { color: #00ff00; width: 97%; } #main p .redbox { background-color: #ff0000; color: #000000; } |
Sass支持以 & 来引用父选择器，转换时，该符号使用父选择器代替：
|
1 2 3 4 5 6 7 8 9 10 11 |
a { font-weight: bold; // 父选择器放在前面 &:hover { text-decoration: underline; } // 也可以放在后面 body.firefox & { font-weight: normal; } } |
转换后的结果：
|
1 2 3 4 5 6 7 8 9 |
a { font-weight: bold; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; } |
你可以把某些同类属性合并到一个块中：
|
1 2 3 4 5 6 7 |
.funky { font: { family: fantasy; size: 30em; weight: bold; } } |
Sass支持两种风格的注释： /* */ 和 //
除了普通的CSS语言扩展外，Sass还支持脚本机制。你可以定义变量、使用函数。任何CSS属性都可以用脚本来指定。
你可以使用 $ 前缀声明SassScript变量：
|
1 2 3 4 5 6 |
$width: 5em; #main { // 引用变量 width: $width; } |
变量的作用域取决于它所处于的块。除了使用$前缀以外，旧式的 ! 前缀仍然被支持；除了使用 : 定义变量值以外，旧式的 = 依然被支持。
| 类型 | 说明 | ||||
| 数字 | 举例：1.2 10 10px | ||||
| 字符串 |
可以没有引号、单引号包围、双引号包围 通常SCSS中使用哪种格式的字符串，则转换后的CSS也使用哪一种。例外情况是 #{} 插值：
转换后引用字符串会变为非引用格式：
|
||||
| 颜色 | 举例：#FF0000 red rgba(255, 0, 0, 0.5) | ||||
| 布尔 | true false | ||||
| 空值 | null | ||||
| 值列表 |
以空格或者逗号分隔。例如： Helvetica, Arial, sans-serif 某些SassScript函数能够操控列表，例如nth函数访问列表的成员，join函数把列表连接为字符串，append函数附加新值到列表中 列表中可以包含其它列表，例如 1px 2px, 5px 6px ，如果内外列表使用相同的分隔符，则必须用括号来区分： (1px 2px) (5px 6px) |
||||
| 映射 |
例如： (key1: value1, key2: value2) 与列表不同，映射必须以括号为界，且必须以逗号分隔条目 某些SassScript函数能够操控映射，例如map-get可以获取一个值，map-merge可以添加条目 映射可以作为列表使用，它相当于键值对的列表 |
| 操作符 | 说明 | ||||||
| == != | 相等性判断，可以用于任何数据类型 | ||||||
| + - * / % |
算术运算符。数字类型支持此类运算符，单位的转换会自动进行 由于CSS允许 / 作为分隔数字的房时，Sass必须支持它。只有使用函数、变量时， / 才会被解析为除法运算符：
使用 - 操作符时，需要注意：
使用 + 可以进行字符串连接：
颜色支持算术运算符，RGB将会分别运算：
|
||||||
| < > <= >= | 关系运算符，数字类型支持此类运算符 | ||||||
| and or not | 用于布尔值的运算 |
SassScript定义了一些额外的函数，调用方式与普通CSS函数一致：
|
1 2 3 4 5 6 7 |
p { color: hsl(0, 100%, 50%); } // 转换后： p { color: red; } |
调用SassScript函数时，可以明确指定参数名称，这样可以改变传参顺序：
|
1 2 3 |
p { color: hsl($hue: 0, $saturation: 100%, $lightness: 50%); } |
所有函数的列表：http://sass-lang.com/documentation/Sass/Script/Functions.html
| 函数 | 说明 |
| lighten | 提高颜色亮度： lighten(#cc3, 10%) // #d6d65c |
| darken | 降低颜色亮度 |
| grayscale | 灰度化颜色： grayscale(#cc3) // #808080 |
| complement | 获得补偿色 |
| invert | 获得反色 |
你可以在选择器、属性名处使用插值来引用变量：
|
1 2 3 4 5 6 7 8 9 |
$name: foo; $attr: border; p.#{$name} { #{$attr}-color: blue; } // 转换后 p.foo { border-color: blue; } |
在属性值中，通常直接使用变量。如果想把插值周围的操作符作为普通CSS字符看待，可以使用插值：
|
1 2 3 4 5 6 7 8 9 10 11 |
p { $font-size: 12px; $line-height: 30px; // 这里的 / 不会作为除法看待 font: #{$font-size}/#{$line-height}; } // 转换后 p { font: 12px/30px; } |
在SassScript中，&符号同样代表父选择器：
|
1 2 3 4 |
.foo.bar .baz.bang, .bip.qux { $selector: &; // 这里变量$selector的值为 ((".foo.bar" ".baz.bang"), ".bip.qux") } |
如果父选择器不存在，则&的值为null。你可以依此判断父选择器是否存在：
|
1 2 3 4 5 6 7 8 9 10 11 |
@mixin does-parent-exist { @if & { &:hover { color: red; } } @else { a { color: red; } } } |
特殊语法 !default 用来给变量赋默认值：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$content: "First content"; // 如果$content没有赋值过，则设置为Second content? $content: "Second content?" !default; $new_content: "First time reference" !default; #main { content: $content; new-content: $new_content; } // 转换后： #main { content: "First content"; new-content: "First time reference"; } |
从另外一个选择器继承属性：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.class1 { border: 1px solid #ddd; } .class2 { @extend .class1; font-size: 120%; } /* 转换后 */ .class1, .class2 { border: 1px solid #ddd; // .class2选择器自动获得该属性 } .class2 { font-size: 120%; } |
在同一个规则中，该指令可以出现多次。
混入，定义一个可复用的代码块：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@mixin left { float: left; margin-left: 10px; } div { @include left; } /* 转换后 */ div { float: left; margin-left: 10px; } |
上述示例类似于@extend，但是混入本身不会引入选择器定义。混入的强大之处在于它支持参数：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// 指定一个value参数，还提供了默认值 @mixin left($value: 10px) { float: left; margin-right: $value; } div { @include left(20px); // 使用默认值 @include left(); @include left; } /* 转换后：*/ div { float: left; margin-right: 20px; } |
用于把外部文件插入到当前文档中：
|
1 2 3 4 5 |
@import "path/filename.scss"; @import "http://foo.com/bar"; @import url(foo); // 同时引入多个文件 @import "rounded-corners", "text-shadow"; |
如果插入的是CSS文件，则等价于CSS3的@import指令。
如果你不希望Sass编译某个scss文件，可以让他的名字以下划线开头。这种文件可以用于被导入，导入时需要去掉下划线前缀：
|
1 2 |
// 导入_colors.scss @import "colors"; |
@import可以嵌套在规则内部使用：
|
1 2 3 |
.example { color: red; } |
|
1 2 3 4 5 6 7 8 |
#main { @import "example"; } // 转换后 #main .example { color: red; } |
用于自定义函数：
|
1 2 3 4 5 6 7 8 9 10 11 |
@function square($n) { @return $n * $n; } #squre { size: square(10); } // 转换后 #squre { size: 10000; } |
SassScript支持条件分支、循环等基本的流程控制。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$width: 100; div { @if $width >= 100 { height: 100px; } @else if ($width <50) { height: 50px; } @else { height: 75px; } } // 转换后： div { height: 100px; } |
注意以开区间结束：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@for $i from 1 to 3 { .kssi-header-#{$i} { font-size: $i*10px; } } // 转换后： .kssi-header-1 { font-size: 10px; } .kssi-header-2 { font-size: 20px; } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$i: 0; @while $i < 2 { .icon-user-#{$i} { background-image: url("user-#{$i}.jpg"); } $i : $i + 1; } // 转换后 .icon-user-0 { background-image: url("user-0.jpg"); } .icon-user-1 { background-image: url("user-1.jpg"); } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
@each $user in user admin anonymous { .icon-#{$user}{ background-image: url("#{$user}.png"); } } // 转换后： .icon-user { background-image: url("user.png"); } .icon-admin { background-image: url("admin.png"); } .icon-anonymous { background-image: url("anonymous.png"); } |
Leave a Reply