Sass——@-Rules 与指令

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