【Sass】CSS样式增强

1. 分为SCSS（Sassy CSS）和Sass（Indented Sass）
2. 任何一种格式可以直接 导入 (@import) 到另一种格式中使用，或者通过 sass-convert 命令行工具转换成另一种格式

$ sass-convert style.sass style.scss

$ sass-convert style.scss style.sass

3. 转化为css：sass input.scss output.css
4. 监听变动：sass --watch input.scss:output.css
5. 监听整个文件夹：sass --watch app/sass:public/stylesheets
6. 嵌套规则
   6.1 内层的样式将它外层的选择器作为父选择器

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
// 编译为

#main p {
  color: #00ff00;
  width: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; 
}
######################
#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}
编译为

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; 
}

6.2 可以用 & 代表嵌套规则外层的父选择器

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
编译为

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

如果含有多层嵌套，最外层的父选择器会一层一层向下传递

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}
编译为

#main {
  color: black; }
  #main a {
    font-weight: bold; }
    #main a:hover {
      color: red; }

& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如

#main {
  color: black;
  &-sidebar { border: 1px solid; }
}
编译为

#main {
  color: black; }
  #main-sidebar {
    border: 1px solid; }

有些 CSS 属性遵循相同的命名空间 (namespace)，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。为了便于管理这样的属性，同时也为了避免了重复输入，Sass 允许将属性嵌套在命名空间中

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

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }
命名空间也可以包含自己的属性值，例如：

.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}

编译为

.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

7. 注释：注释 /* / 与 //,Sass 支持标准的 CSS 多行注释 / */，以及单行注释 //，前者会 被完整输出到编译后的 CSS 文件中，而后者则不会

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
编译为

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }

a {
  color: green; }

8. 将 ! 作为多行注释的第一个字符表示在压缩输出模式下保留这条注释并输出到 CSS 文件中，通常用于添加版权信息
9. 变量：$width: 5em;

main {
  width: $width;
}

10. 数据类型

数字，1, 2, 13, 10px
字符串，有引号字符串与无引号字符串，"foo", 'bar', baz
颜色，blue, #04a3f9, rgba(255,0,0,0.5)
布尔型，true, false
空值，null
数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)

11. 数组 (lists) 指 Sass 如何处理 CSS 中 margin: 10px 15px 0 0 或者 font-face: Helvetica, Arial, sans-serif 这样通过空格或者逗号分隔的一系列的值。nth 函数可以直接访问数组中的某一项；join 函数可以将多个数组连接在一起；append 函数可以在数组中添加新值；而 @each 指令能够遍历数组中的每一项
12. 通过 #{} 插值语句可以在选择器或属性名中使用变量

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

13. Sass 函数允许使用关键词参数 (keyword arguments)

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

14. 圆括号可以用来影响运算的顺序

p {
  width: 1em + (2em * 3);
}

15. SassScript 支持布尔型的 and or 以及 not 运算
16. 字符串运算

p {
  margin: 3px + 4px auto;
}
p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

17. 颜色值计算

p {
  color: #010203 * 2;
}
计算 01 * 2 = 02 02 * 2 = 04 03 * 2 = 06，然后编译为

p {
  color: #020406; }

18. 可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

19. Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
20. 通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries

21. Sass 允许同时导入多个文件，例如同时导入 rounded-corners 与 text-shadow 两个文件：

@import "rounded-corners", "text-shadow";

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

.example {
  color: red;
}
然后导入到 #main 样式内

#main {
  @import "example";
}
将会被编译为

#main .example {
  color: red;
}

24. 如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
编译为

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; } }

25. @media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and
26. 使用 @extend 可以避免上述情况，告诉 Sass 将一个选择器下的所有样式继承给另一个选择器

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

27. 占位符选择器需要通过延伸指令使用，用法与 class 或者 id 选择器一样，被延伸后，占位符选择器本身不会被编译。

.notice {
  @extend %extreme;
}
编译为

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; }

28. 如果要求 @extend 不生成新选择器，可以通过 !optional 声明达到这个目的

a.important {
  @extend .notice !optional;
}

29. 当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
编译为

p {
  border: 1px solid; }

30. @if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
编译为

p {
  color: green; }

31. @for 指令可以在限制的范围内重复输出格式

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

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

32. @each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表

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

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

33. @while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。

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

.item-4 {
  width: 8em; }

.item-2 {
  width: 4em; }

34. 混合指令（Mixin）用于定义可重复使用的样式，避免了使用无语意的 class，比如 .float-left

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
编译为

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; }

35. Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用

$grid-width: 40px;
$gutter-width: 10px;

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

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

#sidebar {
  width: 240px; }