CSS 功能拓展

嵌套

#main p {
  color: #00ff00;

  .redbox {
    color: #000000;
  }
}

属性嵌套

个人基本没怎么用过。

.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 文件中。

注释

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

变量 $

$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;
}

指令 @rule

导入文件 @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，便不会编译 _colours.css 文件。

@import 'colors';

嵌套 @import

// example 文件
.example {
  color: red;
}

#main {
  @import 'example'; // 等价下面

  .example {
    color: red;
  }
}

继承 @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...);
}