Sass

数据类型

数字
字符串，#{}会将引号字符串编译为无引号字符串
颜色
布尔
空值，nul
数组，使用,或空格分割，如果内外两层数组用相同分隔方式，要用圆括号包裹内层(1px 2px) (5px 6px)
maps，类似object，键值对

变量

$styleBaseUrl: "../style"; 
$imgBaseUrl: "../img";

$base-color: red;
$divName: ".myDiv";
$pName: myP;

@import "#{$styleBaseUrl}/themes.less";

#header {\
    background: url("#{$imgBaseUrl}/logo.PNG");

    # 中划线和下划线可以相互兼容
    color: $base_color;
    
    # 使用!global将局部变量转换为全局变量
    $width: 10px !global;
    
}
# 使用#{}，会将有引号字符串编译为无引号字符串
.box #{$divName} .#{$pName}{
    width: $width;
}

nav {
    # 下面两种作用相同
    border: {
        style: solid;
    }
    border-style: solid;
}

# @at-root会在文档的根部发出一个或多个规则，而不是嵌套在其父选择器之下
# widthout值可以多个用空格分隔，值为rule与没有查询的相同,既到根部。all则应移到所有指令和CSS规则之外
# width指定包含。值为rule则应移到所有指令外但会保留所有CSS规则
.parent {
  ...
  @at-root .child1 { ... }
  @at-root (without: media supports) {
      .child2 { ... }
  }
  @at-root {
      .child3 { ... }
      .child4 { ... }
  }
}
# Output
.parent { ... }
.child1 { ... }
.parent .child2 { ... }
.child3 { ... }
.child4 { ... }

# @debug与@warn 将SassScript表达式的值打印到标准错误输出流

父选择器

article a {
  color: blue;
  &:hover {
      color: red
  }
  
  # b & === b article a 不是 article a b article a
  b & { 
      color: blue 
  }
}

import

# sass文件以下划线开头的不会在编译时单独编译这个文件输出css，只用作导入，且导入时不需要写下划线
# 为防止导入文件中的变量覆盖掉已有变量，可在导入文件中变量加上!default，值为null效果相同
$color: red !default;

# sass支持同时导入多个
@import "rounded-corners", "text-shadow";

# 嵌套导入，但不可以在混合与控制指令里嵌套
.a {
    @import "baseA"
}

# 在下面四种情况下会生成原生的css@import(会下载)
- 被导入文件的拓展名是.css；
- 被导入文件的名字是一个URL地址；
- 被导入文件的名字是url()；
- @import包含media queries；

静默注释

# sass提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释//
body {
  color: #333; // 不会出现在生成的css文件中
  padding: 0;  /* 会出现在生成的css文件中 */
  margin /* 不会出现在生成的css中 */: #333;
  background: #333; /* 不会出现在生成的css中 */ 0;
}

混合

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

@mixin a($width: 2px, $height: 3px) {
    color: red;
    
    # 如果没有父选择器，则&的值为null
    @if & {
        &:hover {
            color: red;
        }
    } @else {
        a {
          color: red;
        }
    }
}
.b {
    # 通过$name:value形式传参，不用在乎顺序，可用()也可用{}。!optional要求@extend不生成新选择器
    @include a(
        $height: 1px;
        $width: 2px;
    ) !optional;
}

# 占位符%，占位符选择器本身不会被编译
#context a%extreme {
  color: blue;
}
.notice {
  @extend %extreme;
}
# Output
#context a.notice {
  color: blue;
}

# @media声明中的@extend只会匹配同一媒体声明中的选择器 
# 最外层扩展匹配所有内容，包括嵌套媒体中的选择器

# ...形参实参中都相当于把这个数组展开
$values: #ff0000, #00ff00, #0000ff;
@mixin colors($text, $background, $border) {}
@mixin box-shadow($shadows...) {}
.primary {
    @include colors($values...);
    @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

# 向混合中导入内容
@mixin apply-to-ie6-only {
    * html {
        @content;
    }
}
@include apply-to-ie6-only {
    #logo {
        background-image: url(/logo.gif);
    }
}
# Output
* html #logo {
    background-image: url(/logo.gif);
}

继承

# 继承不是仅仅用`css`样式替换@extend处的代码那么简单。=== 匹配到的选择器,待扩展的选择器{}

.error a{  //应用到.seriousError a
    color: red;
    font-weight: 100;
}
h1.error { //应用到hl.seriousError
    font-size: 1.2rem;
}
.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    # sass的继承类似与less的:extend(.error all)，所有相关的都会继承
    @extend .error;
    
    # 当继承一个元素的时候，给这个元素添加的所有样式都会被继承
    @extend a;
}

控制指令

# @if，当@if的表达式返回值不是false或者null时，输出{}内的代码

# @for，起始截至必须为整数，through包含起始截至值，to只包含起始值
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

# @each
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
@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;
  }
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
  #{$header} {
    font-size: $size;
  }
}

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

函数指令

# 需要调用@return输出结果
@function grid-width($n) {
  @return $n * 2;
}
#sidebar {
    width: grid-width(5px);
}

输出格式 通过 :style option 选项设定，或者在命令行中使用 --style 选项，下面体积会越来越小

nested
expanded
compact
compressed