scss 速记

选择器嵌套

#main p {
  color: #00ff00;

  .red-box {
    color: red;
  }
}

属性嵌套

个人基本没怎么用过。

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

父选择器 &

a {
  font-weight: bold;
  &:hover {
    text-decoration: underline;
  }
  body.firefox & {
    font-weight: normal;
  }
  &-sidebar {
    border: 1px solid;
  }
}

占位符选择器 %

与常用的 id 与 class 选择器写法相似，只是 # 或 . 替换成了 %。当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。常用做预制一组样式。

%my-placeholder {
  color: red;
  font-size: 12px;
}

.my-class {
  @extend %my-placeholder;
}

注释

• 多行注释 /* */，编译后保留；
• 单行注释 //，编译后去除。

// 单行注释

/*
多行注释
*/

.my-class {
  color: red;
}

变量 $

$width: 5em; // 全局
$width: 6rem !default; // 设置默认值
#main {
  $width: 5em; // 局部
  width: $width;
}
#main {
  $width: 5em !global; // 全局
  width: $width;
}

数据类型

• 数字：1, 2, 13, 10px；
• 字符串：有引号字符串与无引号字符串，"foo", 'bar', baz；
• 颜色：blue, #04a3f9, rgba(255,0,0,0.5)；
• 布尔：true, false；
• 空值：null
• 数组：用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif；
  • 独立的值也被视为数组 —— 只包含一个值的数组;
  • 数组中可以包含子数组，内外层使用不同分隔符或使用括号，1px 2px, 5px 6px，(1px 2px) (5px 6px)
• maps：相当于 JavaScript 的 object，(key1: value1, key2: value2)

数字运算

• 普通运算，+, -, *, /, %；
• 关系运算，<, >, <=, >=；
• 相等运算, ==, !=。

插值语句 #{}

通过 #{} 插值语句可以在选择器或属性名中使用变量。

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

导入文件 @import

// 多文件导入，默认拓展名.scss .sass
@import 'rounded-corners', 'text-shadow';

// 使用插值语法
$family: unquote('Droid+Sans');
@import url('http://fonts.googleapis.com/css?family=\#{$family}');

如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。 例如，将文件命名为 _colors.scss，便不会编译 _colors.css 文件。

@import 'colors';

继承 @extend

.error {
  border: 1px #f00;
}
a:hover {
  text-decoration: underline;
}
.seriousError {
  @extend .error;
  @extend a:hover;
  border-width: 3px;
}

条件 @if @else if @else

p {
  @if 1 + 1 == 2 {
    border: 1px solid;
  } @else if {
    border: 2px dotted;
  } @else {
    color: black;
  }
}

循环 @for @while

• @for $var from <start> through <end>，包含<end>；
• @for $var from <start> to <end>，不包含<end>。

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

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

迭代器 @each

• $var in <list>。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// 类似 js 解构语法 每一项结构为 $animal, $color, $cursor
@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;
  }
}

混入 @mixin @include

// 定义
@mixin large-text {
  color: #ff0000;
}

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

// 携带参数，并可以设置默认值
@mixin sexy-border($color, $width: 3rem) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p {
  // 顺序参数
  @include sexy-border(blue, 1in);
  // 指定参数
  @include sexy-border($color: blue);
}

// 解构与打包，类似 js，只不过...后置
@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);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}
$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

在 include 时用括号包裹的内容会插入到 mixin 中 @content 位置。

@mixin media-query($breakpoint) {
  @media (min-width: $breakpoint) {
    @content;
  }
}

.container {
  width: 100%;

  @include media-query(768px) {
    max-width: 960px;
    margin: 0 auto;
  }
}

函数 rgba($color, $alpha)

该函数可以在已有颜色的基础上改变其透明度。例如：rgba(#ff0000, 0.5) 将返回一个半透明的红色。

.my-class {
  color: rgba(#ff0000, 0.5);
}

函数 lighten($color, $amount)

该函数可以使颜色变亮。它接受两个参数，第一个是要修改的颜色，第二个是增加的亮度值。例如：lighten(#333, 20%) 将返回一个比原来更亮的灰色。

.my-class {
  color: lighten(#333, 20%);
}

函数 darken($color, $amount)

该函数与 lighten 相反，可以使颜色变暗。例如：darken(#333, 20%) 将返回一个比原来更暗的灰色。

.my-class {
  color: darken(#333, 20%);
}

函数 mix($color1, $color2, $weight)`

该函数可以将两种颜色混合在一起。它接受三个参数，前两个是要混合的颜色，第三个是混合的比例。例如：mix(#ff0000, #00ff00, 50%) 将返回一个由红色和绿色混合而成的黄绿色。

.my-class {
  color: mix(#ff0000, #00ff00, 50%);
}

函数 percentage($value)`

该函数可以将一个小数转换为百分数。例如：percentage(0.5) 将返回 50%。

.my-class {
  padding: percentage(0.5);
}

函数 ceil($value)`

该函数可以将一个数向上取整。例如：ceil(3.2) 将返回 4。

.my-class {
  line-height: ceil(3.2);
}

函数 floor($value)`

该函数可以将一个数向下取整。例如：floor(3.8) 将返回 3。

.my-class {
  line-height: floor(3.8);
}

函数 min($numbers...) 和 max($numbers...)`

这两个函数分别可以求一组数中的最小值和最大值。它们接受任意数量的参数，例如：min(2, 4, 6) 将返回 2。

.my-class {
  line-height: min(2, 4, 6);
}