Scss入门
CSS功能拓展
1.嵌套规则
scss可以将css进行嵌套使用,外层作为内层的父选择器
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
2.父选择器&
在内层如果需要用到外层的父选择器,可以使用&代表父
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
编译后为 css
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
如果嵌套有多层,最外层的父选择器会向下一层一层传递
#main {
color: black;
a {
font-weight: bold;
&:hover { color: red; }
}
}
编译后为
#main {
color: black; }
#main a {
font-weight: bold; }
#main a:hover {
color: red; }
&必须为选择器的第一个字符,可以跟后缀形成复合选择器 如下例子&
被替换成main
#main {
color: black;
&-sidebar { border: 1px solid; }
}
编译后为
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
3.属性嵌套
有些css属性拥有相同的命名空间,如font下面的font-family,font-size,scss允许将属性嵌套在命名空间中
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
编译后为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }
对于属性的缩写形式,你甚至可以像下边这样来嵌套,指明例外规则:
nav {
border: 1px solid #ccc {
left: 0px;
right: 0px;
}
}
这比下边这种同等样式的写法要好:
nav {
border: 1px solid #ccc;
border-left: 0px;
border-right: 0px;
}
4.占位符选择器%
Sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似,只是 #
或 .
替换成了 %
。必须通过 @extend
指令调用,
5.注释
多行注释 /* */
,以及单行注释 //
,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会
插值语句 (interpolation) 也可写进多行注释中输出变量值:
$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. */
6.变量$
赋值方法和css属性的写法一样
$width: 5em;
直接使用
#main {
width: $width;
}
变量有块级作用域,嵌套规则只能在嵌套内使用(局部变量),全局变量可以在任何地方使用,添加!global
可以将局部变量转化为全局变量。
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}
编译后为
#main {
width: 5em;
}
#sidebar {
width: 5em;
}
7.数据类型
scss支持6种主要的数据类型:
- 数字 1,2,10px
- 字符串,有引号字符串与无引号字符串,“bar”,baz
- 颜色,blue,#04a3f9,rgba(255,0,0,0.5)
- 布尔型,true,false
- 空,null
- 数组list,用空格或逗号分隔符,1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于object,(key1:value1,key2:value2)
在使用#{}时,有引号字符串将被编译为无引号字符串,便于mixin中引用选择器名:
@mixin firefox-message($selector) {
body.firefox #{$selector}:before {
content: "Hi, Firefox users!";
}
}
@include firefox-message(".header");
编译为
body.firefox .header:before {
content: "Hi, Firefox users!"; }
数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0
或者 font-face: Helvetica, Arial, sans-serif
这样通过空格或者逗号分隔的一系列的值。事实上,独立的值也被视为数组 —— 只包含一个值的数组。
数组本身没有太多功能,但 Sass list functions 赋予了数组更多新功能:nth
函数可以直接访问数组中的某一项;join
函数可以将多个数组连接在一起;append
函数可以在数组中添加新值;而 @each
指令能够遍历数组中的每一项。
数组中可以包含子数组,比如 1px 2px, 5px 6px
是包含 1px 2px
与 5px 6px
两个数组的数组。如果内外两层数组使用相同的分隔方式,需要用圆括号包裹内层,所以也可以写成 (1px 2px) (5px 6px)
。变化是,之前的 1px 2px, 5px 6px
使用逗号分割了两个子数组 (comma-separated),而 (1px 2px) (5px 6px)
则使用空格分割(space-separated)。
当数组被编译为 CSS 时,Sass 不会添加任何圆括号(CSS 中没有这种写法),所以 (1px 2px) (5px 6px)
与 1px 2px, 5px 6px
在编译后的 CSS 文件中是完全一样的,但是它们在 Sass 文件中却有不同的意义,前者是包含两个数组的数组,而后者是包含四个值的数组。
用 ()
表示不包含任何值的空数组(在 Sass 3.3 版之后也视为空的 map)。空数组不可以直接编译成 CSS,比如编译 font-family: ()
Sass 将会报错。如果数组中包含空数组或空值,编译时将被清除,比如 1px 2px () 3px
或 1px 2px null 3px
。
基于逗号分隔的数组允许保留结尾的逗号,这样做的意义是强调数组的结构关系,尤其是需要声明只包含单个值的数组时。例如 (1,)
表示只包含 1
的数组,而 (1 2 3,)
表示包含 1 2 3
这个以空格分隔的数组的数组。
8.运算
支持数字的加减乘除、取整等运算 (+, -, *, /, %
),如果必要会在不同单位间转换值。
关系运算 <, >, <=, >=
也可用于数字运算,相等运算 ==, !=
可用于所有数据类型。
对于除法以下三种情况 /
将被视为除法运算符号:
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px; // Plain CSS, no division
$width: 1000px;
width: $width/2; // Uses a variable, does division
width: round(1.5)/2; // Uses a function, does division
height: (500px/2); // Uses parentheses, does division
margin-left: 5px + 8px/2px; // Uses +, does division
}
编译为
p {
font: 10px/8px;
width: 500px;
height: 250px;
margin-left: 9px; }
如果需要使用变量,同时又要确保 /
不做除法运算而是完整地编译到 CSS 文件中,只需要用 #{}
插值语句将变量包裹。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px; }
加号可以用于连接字符串
p {
cursor: e + -resize;
}
编译为
p {
cursor: e-resize; }
注意,如果有引号字符串(位于 +
左侧)连接无引号字符串,运算结果是有引号的,相反,无引号字符串(位于 +
左侧)连接有引号字符串,运算结果则没有引号。
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }
运算表达式与其他值连用时,用空格做连接符:
p {
margin: 3px + 4px auto;
}
编译为
p {
margin: 7px auto; }
在有引号的文本字符串中使用 #{}
插值语句可以添加动态的值:
p:before {
content: "I ate #{5 + 10} pies!";
}
编译为
p:before {
content: "I ate 15 pies!"; }
空的值被视作插入了空字符串:
$value: null;
p:before {
content: "I ate #{$value} pies!";
}
编译为
p:before {
content: "I ate pies!"; }
9.插值语句#{}
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
编译为
p.foo {
border-color: blue; }
#{}
插值语句也可以在属性值中插入 SassScript,大多数情况下,这样可能还不如使用变量方便,但是使用 #{}
可以避免 Sass 运行运算表达式,直接编译 CSS。
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
编译为
p {
font: 12px/30px; }
10.变量定义!default
可以在变量的结尾添加 !default
给一个未通过 !default
声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: "First 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"; }
变量是 null 空值时将视为未被 !default
赋值。
$content: null;
$content: "Non-null content" !default;
#main {
content: $content;
}
编译为
#main {
content: "Non-null content"; }
11.@import
通常,@import
寻找 Sass 文件并将其导入,但在以下情况下,@import
仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
- 文件拓展名是
.css
; - 文件名以
http://
开头; - 文件名是
url()
; @import
包含 media queries。
如果不在上述情况内,文件的拓展名是 .scss
或 .sass
,则导入成功。没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为 .scss
或 .sass
的文件并将其导入。
@import "foo.scss";
或
@import "foo";
都会导入文件 foo.scss,但是
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
编译为
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
Sass 允许同时导入多个文件,例如同时导入 rounded-corners 与 text-shadow 两个文件:
@import "rounded-corners", "text-shadow";
导入文件也可以使用 #{ }
插值语句,但不是通过变量动态导入 Sass 文件,只能作用于 CSS 的 url()
导入方式:
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");
编译为
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
可以将 @import
嵌套进 CSS 样式或者 @media
中,与平时的用法效果相同,只是这样导入的样式只能出现在嵌套的层中。
假设 example.scss 文件包含以下样式:
.example {
color: red;
}
然后导入到 #main
样式内
#main {
@import "example";
}
将会被编译为
#main .example {
color: red;
}
12.@extend
在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class,一个通用样式,一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式,一般会这样写:
<div class="error seriousError">
Oh no! You've been hacked!
</div>
样式如下
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
麻烦的是,这样做必须时刻记住使用 .seriousError
时需要参考 .error
的样式,带来了很多不变:智能比如加重维护负担,导致 bug,或者给 HTML 添加无语意的样式。使用 @extend
可以避免上述情况,告诉 Sass 将一个选择器下的所有样式继承给另一个选择器。
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
上面代码的意思是将 .error
下的所有样式继承给 .seriousError
,border-width: 3px;
是单独给 .seriousError
设定特殊样式,这样,使用 .seriousError
的地方可以不再使用 .error
。
其他使用到 .error
的样式也会同样继承给 .seriousError
,例如,另一个样式 .error.intrusion
使用了 hacked.png
做背景,<div class="seriousError intrusion">
也同样会使用 hacked.png
背景。
.error.intrusion {
background-image: url("/image/hacked.png");
}
@extend
的作用是将重复使用的样式 (.error
) 延伸 (extend) 给需要包含这个样式的特殊样式(.seriousError
),刚刚的例子:
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }
当合并选择器时,@extend
会很聪明地避免无谓的重复,.seriousError.seriousError
将编译为 .seriousError
,不能匹配任何元素的选择器(比如 #main#footer
)也会删除。
Sass 允许延伸任何定义给单个元素的选择器,比如 .special.cool
,a:hover
或者 a.user[href^="http://"]
等,例如:
.hoverlink {
@extend a:hover;
}
同 class 元素一样,a:hover
的样式将继承给 .hoverlink
。
.hoverlink {
@extend a:hover;
}
a:hover {
text-decoration: underline;
}
编译为
a:hover, .hoverlink {
text-decoration: underline; }
与上面 .error.intrusion
的例子一样,所有 a:hover
的样式将继承给 .hoverlink
,包括其他使用到 a:hover
的样式,例如:
.hoverlink {
@extend a:hover;
}
.comment a.user:hover {
font-weight: bold;
}
编译为
.comment a.user:hover, .comment .user.hoverlink {
font-weight: bold; }
同一个选择器可以延伸给多个选择器,它所包含的属性将继承给所有被延伸的选择器:
.error {
border: 1px #f00;
background-color: #fdd;
}
.attention {
font-size: 3em;
background-color: #ff0;
}
.seriousError {
@extend .error;
@extend .attention;
border-width: 3px;
}
编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.attention, .seriousError {
font-size: 3em;
background-color: #ff0; }
.seriousError {
border-width: 3px; }
每个 .seriousError
将包含 .error
与 .attention
下的所有样式,这时,后定义的样式享有优先权:.seriousError
的背景颜色是 #ff0
而不是 #fdd
,因为 .attention
在 .error
之后定义。
多重延伸可以使用逗号分隔选择器名,比如 @extend .error, .attention;
与 @extend .error;
@extend.attention
有相同的效果。
当一个选择器延伸给第二个后,可以继续将第二个选择器延伸给第三个,例如:
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
.criticalError {
@extend .seriousError;
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%;
}
现在,每个 .seriousError
选择器将包含 .error
的样式,而 .criticalError
不仅包含 .seriousError
的样式也会同时包含 .error
的所有样式,上面的代码编译为:
.error, .seriousError, .criticalError {
border: 1px #f00;
background-color: #fdd; }
.seriousError, .criticalError {
border-width: 3px; }
.criticalError {
position: fixed;
top: 10%;
bottom: 10%;
left: 10%;
right: 10%; }
暂时不可以将选择器列 (Selector Sequences),比如 .foo .bar
或 .foo + .bar
,延伸给其他元素,但是,却可以将其他元素延伸给选择器列:
#fake-links .link {
@extend a;
}
a {
color: blue;
&:hover {
text-decoration: underline;
}
}
编译为
a, #fake-links .link {
color: blue; }
a:hover, #fake-links .link:hover {
text-decoration: underline; }
有时,需要定义一套样式并不是给某个元素用,而是只通过 @extend
指令使用,尤其是在制作 Sass 样式库的时候,希望 Sass 能够忽略用不到的样式。
如果使用普通的 CSS 规则,最后会编译出很多用不到的样式,也容易与其他样式名冲突,所以,Sass 引入了“占位符选择器” (placeholder selectors),看起来很像普通的 id
或 class
选择器,只是 #
或 .
被替换成了 %
。可以像 class 或者 id 选择器那样使用,当它们单独使用时,不会被编译到 CSS 文件中。
// This ruleset won't be rendered on its own.
#context a%extreme {
color: blue;
font-weight: bold;
font-size: 2em;
}
占位符选择器需要通过延伸指令使用,用法与 class 或者 id 选择器一样,被延伸后,占位符选择器本身不会被编译。
.notice {
@extend %extreme;
}
编译为
#context a.notice {
color: blue;
font-weight: bold;
font-size: 2em; }
13.@at-root
.parent {
...
@at-root .child { ... }
}
编译后
.parent { ... }
.child { ... }
可以包含多个块
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
编译后
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }
14.控制指令
@if
当 @if
的表达式返回值不是 false
或者 null
时,条件成立,输出 {}
内的代码:
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
编译为
p {
border: 1px solid; }
@if
声明后面可以跟多个 @else if
声明,或者一个 @else
声明。如果 @if
声明失败,Sass 将逐条执行 @else if
声明,如果全部失败,最后执行 @else
声明,例如:
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
编译为
p {
color: green; }
@for
@for
指令可以在限制的范围内重复输出格式,每次按要求(变量的值)对输出结果做出变动。这个指令包含两种格式:@for $var from <start> through <end>
,或者 @for $var from <start> to <end>
,区别在于 through
与 to
的含义:当使用 through
时,条件范围包含 <start>
与 <end>
的值,而使用 to
时条件范围只包含 <start>
的值不包含 <end>
的值。另外,$var
可以是任何变量,比如 $i
;<start>
和 <end>
必须是整数值。
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
编译为
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
@each
@each
指令的格式是 $var in <list>
, $var
可以是任何变量名,比如 $length
或者 $name
,而 <list>
是一连串的值,也就是值列表。
@each
将变量 $var
作用于值列表中的每一个项目,然后输出结果,例如:
@each $animal in puma, sea-slug, egret, salamander {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
}
}
编译为
.puma-icon {
background-image: url('/images/puma.png'); }
.sea-slug-icon {
background-image: url('/images/sea-slug.png'); }
.egret-icon {
background-image: url('/images/egret.png'); }
.salamander-icon {
background-image: url('/images/salamander.png'); }
@while
@while
指令重复输出格式直到表达式返回结果为 false
。这样可以实现比 @for
更复杂的循环,只是很少会用到。例如:
$i: 6;
@while $i > 0 {
.item-#{$i} { width: 2em * $i; }
$i: $i - 2;
}
.item-6 {
width: 12em; }
.item-4 {
width: 8em; }
.item-2 {
width: 4em; }
15.混合指令@
混合指令的用法是在 @mixin
后添加名称与样式,比如名为 large-text
的混合通过下面的代码定义:
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
混合也需要包含选择器和属性,甚至可以用 &
引用父选择器:
@mixin clearfix {
display: inline-block;
&:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
* html & { height: 1px }
}
16.引用混合样式@include
使用 @include
指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
编译为
.page-title {
font-family: Arial;
font-size: 20px;
font-weight: bold;
color: #ff0000;
padding: 4px;
margin-top: 10px; }
也可以在最外层引用混合样式,不会直接定义属性,也不可以使用父选择器。
@mixin silly-links {
a {
color: blue;
background-color: red;
}
}
@include silly-links;
编译为
a {
color: blue;
background-color: red; }
混合样式中也可以包含其他混合样式,比如
@mixin compound {
@include highlighted-background;
@include header-text;
}
@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }
混合样式中应该只定义后代选择器,这样可以安全的导入到文件的任何位置。
17.参数Arguments
参数用于给混合指令中的样式设定变量,并且赋值使用。在定义混合指令的时候,按照变量的格式,通过逗号分隔,将参数写进圆括号里。引用指令时,按照参数的顺序,再将所赋的值对应写进括号:
@mixin sexy-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue, 1in); }
编译为
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值:
@mixin sexy-border($color, $width: 1in) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
编译为
p {
border-color: blue;
border-width: 1in;
border-style: dashed; }
h1 {
border-color: blue;
border-width: 2in;
border-style: dashed; }
有时,不能确定混合指令需要使用多少个参数,比如一个关于 box-shadow
的混合指令不能确定有多少个 ‘shadow’ 会被用到。这时,可以使用参数变量 …
声明(写在参数的最后方)告诉 Sass 将这些参数视为值列表处理:
@mixin box-shadow($shadows...) {
-moz-box-shadow: $shadows;
-webkit-box-shadow: $shadows;
box-shadow: $shadows;
}
.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
编译为
.shadowed {
-moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
-webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}
参数变量也可以用在引用混合指令的时候 (@include
),与平时用法一样,将一串值列表中的值逐条作为参数引用:
@mixin colors($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
@include colors($values...);
}
编译为
.primary {
color: #ff0000;
background-color: #00ff00;
border-color: #0000ff;
}
18.导入内容
在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content
标志的地方:
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
编译为
* html #logo {
background-image: url(/logo.gif);
}
为便于书写,@mixin
可以用 =
表示,而 @include
可以用 +
表示,所以上面的例子可以写成:
=apply-to-ie6-only
* html
@content
+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
注意: 当 @content
在指令中出现过多次或者出现在循环中时,额外的代码将被导入到每一个地方。
mixin 的本地变量不能在传递的样式块中使用,变量将解析为全局值:
$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}
编译为
.colors {
background-color: blue;
color: white;
border-color: blue;
}
19. 函数指令 (Function Directives)
Sass 支持自定义函数,并能在任何属性值或 Sass script 中使用:
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
编译为
#sidebar {
width: 240px; }
与 mixin 相同,也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句,需要调用 @return
输出结果。
自定义的函数也可以使用关键词参数,上面的例子还可以这样写:
#sidebar { width: grid-width($n: 5); }
建议在自定义函数前添加前缀避免命名冲突,其他人阅读代码时也会知道这不是 Sass 或者 CSS 的自带功能。
自定义函数与 mixin 相同,都支持 variable arguments