1、&
&
必须作为选择器的第一个字符,其后可以跟随后缀生成复合的选择器,例如
#main {
color: black;
&-sidebar { border: 1px solid; }
}
复制代码
编译为
#main {
color: black; }
#main-sidebar {
border: 1px solid; }复制代码
2、局部变量转全局变量
局部变量转换为全局变量可以添加 !global
#main {
$width: 5em !global;
width: $width;
}
#sidebar {
width: $width;
}复制代码
3、数据类型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)
3/1、使用 #{}
(interpolation) 时,有引号字符串将被编译为无引号字符串
@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/2、数组
1)使用逗号或空格分割
margin: 10px 15px 0 0
或者 font-face: Helvetica, Arial, sans-serif
2)nth
函数可以直接访问数组中的某一项;join
函数可以将多个数组连接在一起;append
函数可以在数组中添加新值;而 @each
指令能够遍历数组中的每一项。
3)数组中可以包含子数组
1px 2px, 5px 6px
是包含 1px 2px
与 5px 6px
两个数组的数组
4)内外两层数组使用相同的分隔方式,需要用圆括号包裹内层
(1px 2px) (5px 6px)
5)sass中含义不同
(1px 2px) (5px 6px)
与 1px 2px, 5px 6px
前者是包含两个数组的数组,而后者是包含四个值的数组
6)用 ()
表示不包含任何值的空数组(空数组不可以直接编译成 CSS)
如果数组中包含空数组或空值,编译时将被清除,
比如 1px 2px () 3px
或 1px 2px null 3px
3/3、map
scss $map: (key1: value1, key2: value2, key3: value3);
和Lists不同Maps必须被圆括号包围
map-get
函数用于查找键值,map-merge
函数用于map和新加的键值融合,@each
命令可添加样式到一个map中的每个键值对
4、运算
4/1、数字运算(+ | - | * | / | % | > | < | >= | <= | == | !=)
除法
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; }复制代码
如果需要使用变量,同时又要确保 /
不做除法运算,用 #{}
插值语句将变量包裹
p {
$font-size: 12px;
$line-height: 30px;
font: #{$font-size}/#{$line-height};
}
复制代码
编译为
p {
font: 12px/30px; }复制代码
4/2、颜色运算(分段计算红绿蓝的值)
p {
color: #010203 + #040506;
}
复制代码
计算 01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
,然后编译为
p {
color: #050709; }复制代码
p {
color: #010203 * 2;
}
复制代码
计算 01 * 2 = 02
02 * 2 = 04
03 * 2 = 06
,然后编译为
p {
color: #020406; }复制代码
注意:
颜色值包含 alpha channel(rgba 或 hsla 两种颜色值),必须拥有相等的 alpha 值才能进行运算,因为算术运算不会作用于 alpha 值。
2)、颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。
$translucent-red: rgba(255, 0, 0, 0.5);
p {
color: opacify($translucent-red, 0.3);
background-color: transparentize($translucent-red, 0.25);
}
复制代码
编译为
p {
color: rgba(255, 0, 0, 0.8);
background-color: rgba(255, 0, 0, 0.25); }复制代码
3)、IE 滤镜要求所有的颜色值包含 alpha 层,而且格式必须固定 #AABBCCDD
,使用 ie_hex_str
函数可以很容易地将颜色转化为 IE 滤镜要求的格式。
$translucent-red: rgba(255, 0, 0, 0.5);
$green: #00ff00;
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr='#{ie-hex-str($green)}', endColorstr='#{ie-hex-str($translucent-red)}');
}复制代码
编译为
div {
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false',
startColorstr=#FF00FF00, endColorstr=#80FF0000);
}复制代码
4/3、字符串运算
1)如果有引号字符串(位于 +
左侧)连接无引号字符串,运算结果是有引号的,
相反,
无引号字符串(位于 +
左侧)连接有引号字符串,运算结果则没有引号
p:before {
content: "Foo " + Bar;
font-family: sans- + "serif";
}
复制代码
编译为
p:before {
content: "Foo Bar";
font-family: sans-serif; }复制代码
2)运算表达式与其他值连用时,用空格做连接符:
p {
margin: 3px + 4px auto;
}
复制代码
编译为
p {
margin: 7px auto; }复制代码
3)
在有引号的文本字符串中使用 #{}
插值语句可以添加动态的值:
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!"; }复制代码
4/4、布尔值运算(and or not)
4/5、圆括号可以用来影响运算的顺序:
p {
width: 1em + (2em * 3);
}
复制代码
编译为
p {
width: 7em; }复制代码
4/6、通过 Sass::Script::Functions 查看完整的 Sass 函数列表,参数名,以及如何自定义函数。
4/7、#{} 插值语句
通过 #{}
插值语句可以在选择器或属性名中使用变量:
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
复制代码
编译为
p.foo {
border-color: blue; }复制代码
5/1 !default
变量是 null 空值时将视为未被 !default
赋值。
5/2 @import
1)不会导入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);复制代码
注意,不可以同时存在添加下划线与未添加下划线的同名文件,添加下划线的文件将会被忽略。
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import
。
5/3、单独使用时,不会被编译到 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; }复制代码
5/4、如果要求 @extend
不生成新选择器,可以通过 !optional
声明达到这个目的,例如:
a.important {
@extend .notice !optional;
}复制代码
5/5、在指令中使用 @extend
时(比如在 @media
中)有一些限制:Sass 不可以将 @media
层外的 CSS 规则延伸给指令层内的 CSS
下面的例子是可行的:
@media print {
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
@extend .error;
border-width: 3px;
}
}
复制代码
但不可以这样:
.error {
border: 1px #f00;
background-color: #fdd;
}
@media print {
.seriousError {
// INVALID EXTEND: .error is used outside of the "@media print" directive
@extend .error;
border-width: 3px;
}
}复制代码
5/6、@at-root 将样式从根不出发
.parent {
...
@at-root {
.child1 { ... }
.child2 { ... }
}
.step-child { ... }
}
复制代码
Which would output the following:
.parent { ... }
.child1 { ... }
.child2 { ... }
.parent .step-child { ... }复制代码
5/7、@if
@if
的表达式返回值不是 false
或者 null
时,条件成立,输出 {}
内的代码:
@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; }复制代码
5/8、@for
@for $var from <start> through <end>
,或者 @for $var from <start> to <end>
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; }复制代码
5/9、@each
$var in <list>
, $var
可以是任何变量名,比如 $length
或者 $name
,而 <list>
是一连串的值
@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;
}
}
复制代码
is compiled to:
.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; }
复制代码
Since maps are treated as lists of pairs, multiple assignment works with them as well. For example:
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
}
}
复制代码
is compiled to:
h1 {
font-size: 2em; }
h2 {
font-size: 1.5em; }
h3 {
font-size: 1.2em; }复制代码
5/10、直到表达式返回结果为 false
$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; }复制代码
5/11、向混合样式中导入内容
@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
可以用 +
表示,所以上面的例子可以写成: