Sass常用语法

目录
一、功能拓展
二、SassScript
三、@-Rules与指令
四、控制指令
五、混合指令（模块）
六、函数指令
七、输出格式
八、注释

一、功能拓展

1、选择器嵌套

.box {
  width: 666px;
  .content {
    font-size: 66px;
  }
}

2、属性嵌套

.box {
  font: {
    size: 66px;
    weight: bold;
  }
}

3、父选择器

// & 必须置于首位
.box {
  color: red;
  &:hover {
    color: blue;
  }
}

---

二、SassScript

1、变量

// 全局变量
$width: 666px;
.box: $width;

// 局部变量
.box {
  $width: 666px;
  width: $width;
}

// 局部变量转换为全局变量
.box1 {
  $width: 666px !global;
}
.box2 {
  width: $width;
}

// 若var未赋值，则使用该默认值
$var: "default" !default;

2、插值语句 #{}

// 通过 #{} 插值语句可以在选择器或属性名中使用变量
$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

---

三、@-Rules与指令

1、@import

// 导入colors.scss，并编译
@import "colors";

// 导入colors.scss，不编译
@import "_colors";

2、@media

// 嵌套
.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

3、@extend

// @extend的花样很多，以下为基本用法
.father {
  border: 1px #f00;
}

// 继承选择器
.son {
  @extend .father;
  border-width: 3px;
}

4、@at-root

// .child生成于根
.parent {
  ...
  @at-root .child { ... }
}

// 无媒体查询.page生成于根
@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

5、@debug && @warn && @error

// 打印，便于调试
@debug 10em + 12em;
@warn "warn";
@error "error";

---

四、控制指令

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;
  }
}

2、@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

3、@each

@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;
  }
}

4、@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

---

五、混合指令（模块）

1、基本用法

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

2、传入参数，并设置默认值

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

3、使用占位符

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

4、使用简写

// = 表示 @mixin
// + 表示 @include
=apply-to-ie6-only
  * html
    @content

+apply-to-ie6-only
  #logo
    background-image: url(/logo.gif)

---

六、函数指令

// @function：定义函数
// @return：返回内容
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

---

七、输出格式

格式	描述
:nested	不编译
:expanded	编译，多行规则
:compact	编译，单行规则
:compressed	编译，压缩

---

八、注释

/* 编译保留 */
// 编译不保留