文件命名和导入

文件组织结构

.
|-- init.css         # 普通 css 文件
|-- main.scss        # 主scss, 用来import各个模块
|-- module_a         # 以模块或功能划分目录
|   `-- _a.scss      # 被引入的文件以下划线开头, 不会生成对应的css文件
`-- module_b
   `-- _b.scss

运行监控, 监控该目录, 输出 style.css .

sass --watch .:style.css

@import "init.css";             # 按照 CSS 本来的模式引入, 不能省略文件扩展名, init.css 不合并进 style.css
@import "module_a/_a.scss";     # 被引入的文件. 该文件有修改, 自动更新 style.css
@import "module_b/b";           # 可以省略前导下划线或文件扩展名

注释

/**/ CSS 标准注释, 会输出到最终 CSS 中

// 该注释为 SASS 注释, 不会输出到最终 CSS 中

默认不支持中文注释, 务必在文件顶部使用 @charset "utf-8";

变量

变量需要先定义再使用;

SCSS 文件从头到尾顺序解析, 变量可以重复定义, 后定义的覆盖先定义的;

$var: 10px;
$var: 20px;

div {
  padding: $var;
}

/*
$ sass main.scss
div {
  padding: 20px; }
*/

新版SASS的变量有了作用域.

@charset "utf-8";
$var: 1px; //全局可用

.l1 {
  $var: 2px; // 仅在嵌套内可用
  $gv: 999px !global; // 对下文全局可用

  .l2 {
    margin: $var;
  }
}

.others {
  width: $gv;
}

/*
$ sass main.scss
.l1 .l2 {
  margin: 2px; }

.others {
  width: 999px; }
*/

可以使用 !default 关键字, 降低变量的优先级:

$var: 10px;
$var: 20px !default;

div {
  padding: $var;
}

/*
$ sass main.scss
div {
  padding: 10px; }
*/

如果重复定义 !default, 则后出现的 !default 优先级更高, 即使用前值:

$var: 10px !default;
$var: 20px !default;


div {
  padding: $var;
}

/*
$ sass main.scss
div {
  padding: 10px; }
*/

变量的值也可以插入到选择器中, 或用于其他文本插值的地方, 需要包裹 #{}

$var: light;

data-#{$var} {
  padding: 0;
}

/*
$ sass main.scss
data-light {
  padding: 0; }
*/

数组变量, 索引从1开始

$arr: 11px 13px 15px;

.smail {
  font-size: nth($arr, 1);
}

.middle {
  font-size: nth($arr, 2);
}

.big {
  font-size: nth($arr, 3);
}

/*
.smail {
  font-size: 11px; }

.middle {
  font-size: 13px; }

.big {
  font-size: 15px; }
*/

数组变量中包含元组, 使用 , 或 () 分隔

$arr_padding: 11px 13px, 21px 23px;
$arr_margin: (6px 8px) (7px 9px);

.thin {
  padding: nth($arr_padding, 1);
  margin: nth($arr_margin, 1);
}

.wide {
  padding: nth($arr_padding, 2);
  margin: nth($arr_margin, 2);
}

/*
$ sass main.scss
.thin {
  padding: 11px 13px;
  margin: 6px 8px; }

.wide {
  padding: 21px 23px;
  margin: 7px 9px; }

*/

hash变量, 注意特殊位置变量用 #{} 包裹

$map: (level1: #333, level2: #555, level3: #777);

@each $k, $v in $map {
  .class-#{$k} {
    color: $v;
  }
}

#l3 {
  color: map-get($map, 'level3');
}

/*
$ sass main.scss
.class-level1 {
  color: #333; }

.class-level2 {
  color: #555; }

.class-level3 {
  color: #777; }

#l3 {
  color: #777; }

*/

嵌套

除了选择器嵌套, SASS 还支持属性嵌套.

#topic {
  background-color: antiquewhite;
  h2 {
    font-size: large;
  }


  &:hover {
    background-color: darkgray;
  }

  border: {
    left: {
      width: 5px;
      color: red;
    }

    bottom: {
      left-radius: 10px;
    }
  }
}

/*
$ sass main.scss
#topic {
  background-color: antiquewhite;
  border-left-width: 5px;
  border-left-color: red;
  border-bottom-left-radius: 10px; }
  #topic h2 {
    font-size: large; }
  #topic:hover {
    background-color: darkgray; }

*/

混入

混入可以带参数, 甚至多个参数

@mixin width-control {
  width: 100%;
  max-width: 1000px;
}

@mixin img-control($img-width: 100px, $img-height: 100%) {
  width: 100%;
  max-width: $img-width;
  height: $img-height;
}

.page {
  @include width-control;

  background-color: red;

  img {
    @include img-control();
  }

  img.special1 {
    @include img-control(200px);
  }

  img.special2 {
    @include img-control($img-height: 200px);
  }
}

/*
$ sass main.scss
.page {
  width: 100%;
  max-width: 1000px;
  background-color: red; }
  .page img {
    width: 100%;
    max-width: 100px;
    height: 100%; }
  .page img.special1 {
    width: 100%;
    max-width: 200px;
    height: 100%; }
  .page img.special2 {
    width: 100%;
    max-width: 100px;
    height: 200px; }
*/

混入与模板

适用于: 往固定的媒体检查模板中注入样式.

@mixin max-screen($res){
  @media only screen and ( max-width: $res )
  {
    @content;
  }
}

@include max-screen(480px) {
  body { color: red }
}

/*
$ sass main.scss
@media only screen and (max-width: 480px) {
  body {
    color: red; } }
*/

继承

把继承目标的样式拷贝到当前位置

#target {
  color: red;
}

#current {
  @extend #target;
}

/*
$ sass main.scss
#target, #current {
  color: red; }
*/

占位

和继承操作类似, 但是并不需要继承目标输出

%target {
  color: red;
}

#current {
  @extend %target;
}

/*
$ sass main.scss
#current {
  color: red; }
*/

复杂逻辑

SASS 支持一些逻辑流程, 支持自定义方法, 支持条件判断和循环遍历.

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}


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


@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

参考

http://sass-lang.com/guide

http://sass-lang.com/documentation/Sass/Script/Functions.html

https://www.w3cplus.com/sassguide/syntax.html