Sass 支持所有的 CSS3 @-Rules,以及 Sass 特有的 “指令”(directives)
CSS3 @-Rules
@import
——css中通过@import导入css文件时,将增加http请求次数,scss中执行该指令将导入其他scss文件再编译在同一个css文件,这样不会增加http请求的次数,如果在scss文件中用@import导入css文件效果跟在css文件中导入一样,他们并不会编译成一个css文件
@import "reset.css";
@import "file.scss";
p {
background: #0982C1;
}
/*编译成css*/
@import "reset.css";
body { //body 是从reset.css文件中导入的
background: #EEE;
}
p {
background: #0982C1;
}
@media
@extend
——将一个选择器的样式继承到另一个选择器上
.common{
font-size:12px;
color:#eee;
}
p{
@extend .common;//继承.common 所有样式
margin:20px;
}
a{
@extend .common;
margin:10px;
}
/*编译为css*/
.common, p, a {
font-size: 12px;
color: #eee; }
p {
margin: 20px; }
a {
margin: 10px; }
Sass 特有的 “指令”(directives)
控制指令 (Control Directives)
——主要与混合指令 (mixin) 配合使用,尤其是在 Compass 等样式库中
@if
@if 可单独使用也可跟@else if 和@ else 一起使用
$num:5;
div{
@if $num == 1{
z-index:$num;
}@else if $num == 2{
z-index:2;
}@else{
z-index:5;
}
}
/*编译为css*/
div {
z-index: 5; }
@for
sass中的@for循环语句要配合”from“和”through“一起使用
——@for $var form X through Y {语句块} //当X==Y时,没有输出任何样式,不起作用
@for $i from 2 through 3 {
.item-#{$i} { z-index:$i;}
}
/*转换为css*/
.item-2 {
z-index: 2; }
.item-3 {
z-index: 3; }
@each
与in一起使用
——@each $var in <list> {语句块}
@each $i in 1, 2, 3, 4{
.item-#{$i}{z-index:$i;}
}
/*编译为css*/
.item-1 {
z-index: 1; }
.item-2 {
z-index: 2; }
.item-3 {
z-index: 3; }
.item-4 {
z-index: 4; }
@while
$i:1;
@while $i <= 3{
.item-#{$i}{z-index:$i;}
$i:$i+1;
}
/*编译为css*/
.item-1 {
z-index: 1; }
.item-2 {
z-index: 2; }
.item-3 {
z-index: 3; }
混合指令 (Mixin Directives)
——用于定义可重复使用的样式,Mixins可以将一部分共有的样式抽出,作为单独定义的模块,被很多选择器重复使用。混合指令可以包含所有的 CSS 规则,绝大部分 Sass 规则,甚至通过参数功能引入变量,输出多样化的样式,参数可以带默认值。通过mixin定义的混合指令,要通过@include指令引用样式。
@mixin 定义混合指令
——这里不带默认值的参数要在mixin参数列表中先申明,带默认值的要后申明,否则将出错。
@include 引用混合样式
@mixin btnStyle($color,$width:60px,$height:30px){
width:$width;
height:$height;
line-height:$height;
text-align:center;
color:$color;
}
li {
@include btnStyle(#eee,50px);
}
/*编译为css*/
li {
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
color: #eeeeee; }
参数 (Arguments)
向混合样式中导入内容 (Passing Content Blocks to a Mixin)
函数指令 (Function Directives)
——Sass 允许自定义函数作用于任何值或者字符串,例如:
$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; }
输出样式 (Output Style)
——Sass 支持多种输出样式,满足不同的需求。通过 :style 选项设定输出样式,或者在命令行中使用 --style 命令。
:nested:expanded
:compact
:compressed