SCSS 常用知识点
CSS 功能拓展
1、嵌套规则
Sass 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:
#main p {
color: #00ff00;
.redbox {
color: #000000;
}
}
编译为
#main p {
color: #00ff00; }
#main p .redbox {
color: #000000; }
2、父选择器 &
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover
样式时,或者当 body
元素有某个 classname 时,可以用 &
代表嵌套规则外层的父选择器。(&
必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器)
#main {
color: black;
&-sidebar { border: 1px solid; }
}
编译为
#main {
color: black; }
#main-sidebar {
border: 1px solid; }
3、属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight
都以 font
作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:
.funky {
font: {
size: 30em;
weight: bold;
}
}
// 命名空间也可以包含自己的属性值
.funky-1 {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
编译为
.funky {
font-size: 30em;
font-weight: bold; }
.funky-1 {
font: 20px/24px;
font-family: fantasy;
font-weight: bold; }
4、占位符选择器 %foo
Sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似,只是 #
或 .
替换成了 %
。必须通过 @extend 指令调用,更多介绍请查阅 @extend-Only Selectors。
当占位符选择器单独使用时(未通过 @extend
调用),不会编译到 CSS 文件中。
%red {
color: red;
}
编译为
(空白的,% 不会编译到 css 文件中)
SassScript
在 CSS 属性的基础上 Sass 提供了一些名为 SassScript 的新功能。 SassScript 可作用于任何属性,允许属性使用变量、算数运算等额外功能。
通过 interpolation,SassScript 甚至可以生成选择器或属性名,这一点对编写 mixin 有很大帮助。
1、变量$
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
将局部变量转换为全局变量可以添加 !global
声明
$width: 5em;
#main {
width: $width;
// 将局部变量转换为全局变量可以添加 !global 声明
$height: 100px !global;
}
#sidebar {
height: $height;
}
编译为
#main {
width: $width; }
#sidebar {
height: 100px; }
2、数据类型
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 支持 CSS 的两种字符串类型:有引号字符串 (quoted strings),如 "Lucida Grande"
'http://sass-lang.com'
;与无引号字符串 (unquoted strings),如 sans-serif
bold
,在编译 CSS 文件时不会改变其类型。只有一种情况例外,使用 #{}
(interpolation) 时,有引号字符串将被编译为无引号字符串,这样便于在 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!"; }
3、运算
所有数据类型均支持相等运算 ==
或 !=
,此外,每种数据类型也有其各自支持的运算方式。
1、数字运算
SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %
),如果必要会在不同单位间转换值。
p {
width: 1in + 8pt; // 1.111in;
}
2、颜色运算
p {
color: #010203 + #040506; // #050709
color: #010203 * 2; // #020406;
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75); //必须拥有相等的 alpha 值才能进行运算 color: rgba(255, 255, 0, 0.75);
}
3、字符串运算
+
可用于连接字符串。在有引号的文本字符串中使用 #{}
插值语句可以添加动态的值。
p {
cursor: e + -resize; // e-resize;
content: "I ate #{5 + 10} pies!"; // "I ate 15 pies!"; 在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值:
}
函数
SassScript 定义了多种函数,有些甚至可以通过普通的 CSS 语句调用:
p {
color: hsl(0, 100%, 50%); // #ff0000;
}
插值语句#{}
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} { // p.foo
#{$attr}-color: blue; // border-color: blue;
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height}; // font: 12px/30px;
}
变量定义!default
可以在变量的结尾添加 !default
给一个未通过 !default
声明赋值的变量赋值,此时,如果变量已经被赋值,不会再被重新赋值,但是如果变量还没有被赋值,则会被赋予新的值。
$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
content: $content; // "First content";
new-content: $new_content; // "First time reference";
}
@import
(重点)
Sass 拓展了 @import
的功能,允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中,另外,被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常,@import
寻找 Sass 文件并将其导入,但在以下情况下,@import
仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
-
文件拓展名是
.css
; -
文件名以
http://
开头; -
文件名是
url()
; -
@import
包含 media queries。
如果不在上述情况内,文件的拓展名是 .scss
或 .sass
,则导入成功。没有指定拓展名,Sass 将会试着寻找文件名相同,拓展名为 .scss
或 .sass
的文件并将其导入。
// 都会导入文件 foo.scss
@import "foo.scss";
/* or */
@import "foo";
---------------------
// 以下情况下,`@import` 仅作为普通的 CSS 语句,不会导入任何 Sass 文件。
@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()
导入方式
分音(重点:下划线)
如果需要导入 SCSS 或者 Sass 文件,但又不希望将其编译为 CSS,只需要在文件名前添加下划线,这样会告诉 Sass 不要编译这些文件,但导入语句中却不需要添加下划线。
例如,将文件命名为 _colors.scss
,便不会编译 _colours.css
文件。
@import "colors";
上面的例子,导入的其实是 _colors.scss 文件
注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。
嵌套 @import
基本不会使用到 了解更多
@media
Sass 中 @media
指令与 CSS 中用法一样,只是增加了一点额外的功能:允许其在 CSS 规则中嵌套。如果 @media
嵌套在 CSS 规则内,编译时,@media
将被编译到文件的最外层,包含嵌套的父选择器。这个功能让 @media
用起来更方便,不需要重复使用选择器,也不会打乱 CSS 的书写流程。
@extend
将一个选择器下的所有样式继承给另一个选择器。
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
-------------------
#admin .tabbar a {
font-weight: bold;
}
#admin .overview .fakelink {
@extend a;
}
编译为
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }
-------------------
#admin .tabbar a,
#admin .tabbar .overview .fakelink,
#admin .overview .tabbar .fakelink {
font-weight: bold; }
注意:暂时不可以将选择器列 (Selector Sequences),比如 .foo .bar
或 .foo + .bar
,延伸给其他元素,但是,却可以将其他元素延伸给选择器列
控制指令
1、@if
、@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; }
2、@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; }
}
// 可以理解为 for (i = 1; i <= 3; i++)
@for $i from 1 to 3 {
.item-#{$i} { width: 2em * $i; }
}
// 可以理解为 for (i = 1; i < 3; i++)
编译为
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }
------------------
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
3、@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'); }
多参数
@each $animal, $color, $cursor in (puma, black, default),
(sea-slug, blue, pointer),
(egret, white, move) {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
编译为
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default; }
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer; }
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move; }
4、@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; }
混合指令 @mixin
(重点)
混合指令(Mixin)用于定义可重复使用的样式,避免了使用无语意的 class,比如 .float-left
。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式。
混合指令的用法是在 @mixin
后添加名称与样式,比如名为 large-text
的混合通过下面的代码定义:
使用 @include
指令引用混合样式,格式是在其后添加混合名称,以及需要的参数(可选):
//混合指令也可以使用给变量赋值的方法给参数设定默认值,然后,当这个指令被引用的时候,如果没有给参数赋值,则自动使用默认值:
@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 { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 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;
}
向混合样式中导入内容 @content
(重点)
在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content
标志的地方:
在引用混合样式的时候,可以先将一段代码导入到混合指令中,然后再输出混合样式,额外导入的部分将出现在 @content
标志的地方:
@mixin apply-to-ie6-only {
* html {
@content;
}
}
@include apply-to-ie6-only {
#logo {
background-image: url(/logo.gif);
}
}
---------------------
$color: white;
@mixin colors($color: blue) {
background-color: $color;
@content;
border-color: $color;
}
.colors {
@include colors { color: $color; }
}
编译为
* html #logo {
background-image: url(/logo.gif);
}
---------------------
.colors {
background-color: blue;
color: white;
border-color: blue;
}
为便于书写,@mixin
可以用 =
表示,而 @include
可以用 +
表示,所以上面的例子可以写成:
=apply-to-ie6-only
* html
@content
+apply-to-ie6-only
#logo
background-image: url(/logo.gif)
注意: 当 @content
在指令中出现过多次或者出现在循环中时,额外的代码将被导入到每一个地方。
函数指令 @function
(重点)
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