sass文档摘记

过了一遍sass文档，自己过滤了一些觉得不太推荐使用的内容，记录下以前不知道的内容
下文中例子都摘自https://www.sass.hk/docs/

1.变量

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

变量可以引用别的变量
中划线和下划线是互通的，也就是说，$a_b和$a-b是同一个变量，最好不要使用这个规则
变量默认值，$fancybox-width: 400px !default;
!global可以将局部变量转换为全局，最好不要用
#{}引用的变量将编译为无引号字符，可以避免运行运算符

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height}; // 输出12px/30px; 
  font: $font-size/$line-height; // 输出0.4
}

2.嵌套

属性也可以嵌套，但是个人觉得别用为好

nav {
  border: 1px solid #ccc {
    left: 0px;
    right: 0px;
  }
}

3.@import

不同于css，sass在生成css时就会把文件导入
局部文件的文件名以下划线开头，局部文件，不需要单独生成css的文件，比如themes/_night-sky.scss，这样导入@import “themes/night-sky”;
导入文件也可以嵌套，.blue-theme {@import “blue-theme”}
包含media queries，@import仅作为普通的CSS语句，http://开头，url()地址，也是一样
不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import

4.mixin

mixin可以传参

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}
a {
  @include link-colors(blue, red, green);
}

//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

// 这样写可以忽略传参的顺序
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

// 这样写可以给参数赋默认值
@mixin link-colors(
    $normal,
    $hover: $normal,
    $visited: $normal
  )
{
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

// 不定参数
@mixin box-shadow($shadows...) {
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
// 另一种情况
@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

@content用来传递mixin的内容

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

// @content的变量值是@include定义的时候值
$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
// 输出
.colors {
  background-color: blue;
  color: white; // 注意这里
  border-color: blue;
}

@content的目的，使用media-queries，animation的keyframes等块内容的时候

@mixin keyframes($name){ 
  @keyframes #{$name} { 
    @content; 
  } 
} 
@include keyframes(show){ 
  0% { opacity:0; } 
  100% { opacity:1; } 
}

@mixin 可以用 = 表示， @include 可以用 + 表示

5.extend

慎用，尤其对于后代选择器

.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// 下面这句将会应用到.seriousError a，尤其需要注意
.error a{  
  color: red;
  font-weight: 100;
}
// 也就是说生成后是这样的
.error a, .seriousError a {
  color: red;
  font-weight: 100; 
}

// %作为占位符
#context a%extreme {
  color: blue;
}
.notice {
  @extend %extreme;
}
// 输出
#context a.notice {
  color: blue;
}

// 听说这种情况使用%占位比mixin要好，但是%的块里面是不可以用&的，使用了也不会生效
// 参考http://www.w3cplus.com/preprocessor/8-tips-help-get-best-sass.html
%bg-image { 
  width: 100%; 
  background-position: center center; 
  background-size: cover; 
  background-repeat: no-repeat;
} 
.image-one { 
  @extend %bg-image; 
  background-image:url("/img/image-one.jpg");
} 
.image-two { 
  @extend %bg-image; 
  background-image:url("/img/image-two.jpg");
}

在指令中使用 @extend 时，必须延伸给相同指令层中的选择器

// 可以
@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

// 不行
.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

6.指令

@at-root 让规则生成在文档的root层级下，不推荐使用
@debug @warn @error 调试用
@if 分支
@for @each @while 循环
其中each还可以写成这样

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move)
以及这样
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em)        

再看一个@while的例子，变量可以很灵活
$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2; // 注意这里
}

@function 自定义函数

$width: 40px;

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

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