SASS基本用法指南

什么是 SASS ?

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

安装及使用

• 安装

npm i -g sass

• 使用

sass input.scss output.css

监视单个 Sass 文件，每次修改并保存时自动编译：

sass --watch input.scss:output.css

监视整个文件夹：

sass --watch app/sass:public/stylesheets

基本用法

• 变量

$width: 100px;
.block {
   width: $width;
}

• 数据类型

1. 数字，1, 2, 13, 10px
2. 字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
3. 颜色，blue, #04a3f9, rgba(255,0,0,0.5)
4. 布尔型，true, false
5. 空值，null
6. 数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
7. maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

• 运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

.block {
  $width: 100px;
  height: (100px/2);
  margin-left: $width - 100px/2px;
}

• 函数

.block {
  color: hsl(0, 100%, 50%);
}

• 插值语句

$name: foo;
$attr: border;

.block.#{$name} {
  #{$attr}-color: blue;
}

• @import

1. 文件拓展名是 .css；
2. 文件名以 http:// 开头；
3. 文件名是 url()；
4. @import 包含 media queries。

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

• 嵌套 @import

.example {
  color: red;
}

.block {
  @import "example";
}

• @media

.block {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

• @extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.block {
  @extend .error;
  border-width: 3px;
}

• @if

$score: S;
p {
  @if $score == S {
    font-size: 20px;
  } @else if $score == A {
    font-size: 18px;
  } @else if $score == B {
    font-size: 16px;
  } @else if $score == C {
    font-size: 14px;
  } @else {
    font-size: 12px;
  }
}

• @for

@for $i from 1 through 3 {
  .item-#{$i} { font-size: 12px * $i; }
}

• @each

@each $score in S, A, B, C, D{
  .#{$score }-icon {
    background-image: url('/images/#{$score }.png');
  }
}

• @while

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

• 定义混合指令 @mixin (Defining a Mixin: @mixin)

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

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

• 参数 (Arguments)

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

@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

• 函数指令 (Function Directives)

$grid-width: 40px;
$gutter-width: 10px;

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

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

• 输出格式 (Output Style)

:nested

Nested （嵌套）样式是 Sass 默认的输出格式，能够清晰反映 CSS 与 HTML 的结构关系。选择器与属性等单独占用一行，缩进量与 Sass 文件中一致，每行的缩进量反映了其在嵌套规则内的层数

:expanded

Expanded 输出更像是手写的样式，选择器、属性等各占用一行，属性根据选择器缩进，而选择器不做任何缩进。

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

:compact

Compact 输出方式比起上面两种占用的空间更少，每条 CSS 规则只占一行，包含其下的所有属性。嵌套过的选择器在输出时没有空行，不嵌套的选择器会输出空白行作为分隔符。

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

:compressed

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed 输出方式删除所有无意义的空格、空白行、以及注释，力求将文件体积压缩到最小，同时也会做出其他调整，比如会自动替换占用空间最小的颜色表达方式。

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}