目录
Scss (Sassy CSS),一款css预处理语言,SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感,其实就和css3语法一样,其后缀名是分别为 .scss。
一、CSS 功能拓展
1、允许嵌套
允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器,例如:
.main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
2、父选择器 &
在嵌套 CSS 规则时,有时也需要直接使用嵌套外层的父选择器,例如,当给某个元素设定 hover 样式时,或者当 body 元素有某个 classname 时,可以用 & 代表嵌套规则外层的父选择器。
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
// 编译为
a {
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body.firefox a {
font-weight: normal;
}
3、属性嵌套
有些 CSS 属性遵循相同的命名空间 (namespace),比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性,同时也为了避免了重复输入,Sass 允许将属性嵌套在命名空间中,例如:
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
//编译为
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
4、占位符选择器 %
Sass 额外提供了一种特殊类型的选择器:占位符选择器 (placeholder selector)。与常用的 id 与 class 选择器写法相似,只是 # 或 . 替换成了 %。必须通过 @extend 指令调用。(在下面@extend模块举例子)
二、注释 /* */ 与 //
支持标准的 CSS 多行注释 /* */,以及单行注释 //,前者会 被完整输出到编译后的 CSS 文件中,而后者则不会
/* This comment is
* several lines long. */
body { color: black; }
// These comments are only one line long each.
a { color: green; }
//编译为
/* This comment is
* several lines long. */
body { color: black; }
a { color: green; }
三、SassScript
1、变量 $
SassScript 最普遍的用法就是变量,变量以美元符号开头,赋值方法与 CSS 属性的写法一样:
$width: 5em;
.main {
width: $width;
}
// 编译为
.main {
width: 5em;
}
2、运算
所有数据类型均支持相等运算 == 或 !=,此外,每种数据类型也有其各自支持的运算方式。
p { width: 1in + 8pt; }
// 编译为
p { width: 1.111in; }
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 { 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; }
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!"; }
3、圆括号
p { width: 1em + (2em * 3); }
// 编译为
p { width: 7em; }
四、@-Rules 与指令
1、@import
@import "foo.scss"; //引入外部样式
假设 example.scss 文件包含以下样式:
.example { color: red; }
然后导入到 #main 样式内
#main { @import “example”; }
将会被编译为
#main .example { color: red; }
2、@media
.sidebar { width: 300px; @media screen and (orientation:
landscape) {
width: 500px; } }
3. @extend继承
@extend让你能够在多个选择器中通过继承的方式共享一段样式:
.icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
@extend .icon;
/* error specific styles... */
}
.info-icon {
@extend .icon;
/* info specific styles... */
}
//编译为
.icon, .error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
如果你不想要.icon这个类,那就改为%icon,将编译为
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
五、控制指令
1、@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; }
2、@for
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//编译为
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }