【前端学习】sass入门

sass官网
一、简介
1、特色
兼容css3
增加变量、嵌套（nesting）、混入（mixins）等功能
函数可以对颜色和属性进行运算
控制指令（control directives）
2、语法
sass（indented Sass，简称sass）：用缩进代替了花括号
scss（Sassy CSS，简称Scss）：和css差不多
从这里可以看出sass和scss是一回事，只是书写的语法/风格不同

二、功能扩展
1、嵌套
主要是针对后代选择器的简便写法

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

2、父选择器（&）
感觉就像直接连接上了
示例1：

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

编译为

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

示例2：

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

编译为

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

3、属性嵌套
感觉就像把嵌套的编译成加短杠的

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

编译为

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

4、占位符选择器
没看明白

5、注释
sass开始支持单行注释，和js一样了

6、sassScript
6.1interactive shell
不大管用

6.2变量$
默认为块级作用域（局部变量），全局变量需要用!global声明

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

6.3数据类型
感觉也用不到
数字，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)

6.4运算
6.4.1数字运算

p {
  width: 1in + 8pt;
}

编译成

p {
  width: 1.111in; 
}

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。变成布尔值
特殊说明除法：

p {
  font: 10px/8px;             // Plain CSS, no division
  $width: 1000px;
  width: $width/2;            // Uses a variable, does division
  width: round(1.5)/2;        // Uses a function, does division
  height: (500px/2);          // Uses parentheses, does division
  margin-left: 5px + 8px/2px; // Uses +, does division
}

编译为

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px; 
}

6.4.2 颜色运算
颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值：

p {
  color: #010203 + #040506;
}

编译成

p {
  color: #050709; 
}

数字与颜色值之间也可以进行算数运算，同样也是分段计算的，比如

p {
  color: #010203 * 2;
}

编译成

p {
  color: #020406; }

需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译为

p {
  color: rgba(255, 255, 0, 0.75); 
}

6.4.3字符串运算

p {
  cursor: e + -resize;
}

编译为

p {
  cursor: e-resize; }

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。
运算表达式与其他值连用时，用空格做连接符：

p {
  margin: 3px + 4px auto;
}

编译为

p {
  margin: 7px auto; 
}

在有引号的文本字符串中使用 #{} 插值语句可以添加动态的值：

p:before {
  content: "I ate #{5 + 10} pies!";
}

编译为

p:before {
  content: "I ate 15 pies!";
}

空的值被视作插入了空字符串：

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

编译为

p:before {
  content: "I ate pies!"; }

6.4.4布尔运算
SassScript 支持布尔型的 and or 以及 not 运算。
6.5.5数组运算
数组不支持任何运算方式，只能使用 list functions 控制。

6.5圆括号
圆括号可以用来影响运算顺序，小括号内优先计算

6.6函数
SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用：

p {
  color: hsl(0, 100%, 50%);
}

编译为

p {
  color: #ff0000; 
}

6.6.1关键词参数
Sass 函数允许使用关键词参数 (keyword arguments)，上面的例子也可以写成

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

这样做的好处主要是阅读起来比较方便，并且由于指定了键值还可以打乱参数顺序使用。

6.7插值（#{}）
可以插入变量（比如下文的$name）

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

编译为

p.foo {
  border-color: blue; 
}

也可以插入属性值（比如下文的$font-size）

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

编译为

p {
  font: 12px/30px; 
}

6.8 &符号
看不明白

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

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;
#main {
  content: $content;
  new-content: $new_content;
}

编译为

#main {
  content: "First content";
  new-content: "First time reference"; 
}

变量是 null 空值时将视为未被 !default 赋值。

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

编译为

#main {
  content: "Non-null content";
}

7、@Rules与指令（最重要的部分之一）
7.1@import
Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。
通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。
文件拓展名是 .css；
文件名以 http:// 开头；
文件名是 url()；
@import 包含 media queries。
比如

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。
导入文件也可以使用 #{ } 插值语句，但不是通过变量动态导入 Sass 文件，只能作用于 CSS 的 url() 导入方式：

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

编译为

@import url("http://fonts.googleapis.com/css?family=Droid+Sans");

7.1.1. 分音 (Partials)
如果需要导入 SCSS 或者 Sass 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。
例如，将文件命名为 _colors.scss，便不会编译 _colors.css 文件。
@import “colors”;
上面的例子，导入的其实是 _colors.scss 文件
7.1.2. 嵌套 @import
可以将 @import 嵌套进 CSS 样式或者 @media 中
假设 example.scss 文件包含以下样式：

.example {
  color: red;
}

然后导入到 #main 样式内

#main {
  @import "example";
}

将会被编译为

#main .example {
  color: red;
}

不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。

7.2.@media
Sass 中 @media 指令与 CSS 中用法一样，只是增加了一点额外的功能：允许其在 CSS 规则中嵌套。如果 @media 嵌套在 CSS 规则内，编译时，@media 将被编译到文件的最外层，包含嵌套的父选择器。这个功能让 @media 用起来更方便，不需要重复使用选择器，也不会打乱 CSS 的书写流程。

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

编译为

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

@media 的 queries 允许互相嵌套使用，编译时，Sass 自动添加 and

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

编译为

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

@media 甚至可以使用 SassScript（比如变量，函数，以及运算符）代替条件的名称或者值
7.3. @extend
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。使用sass可以这样写。

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

@extent-Only选择器
有时，需要定义一套样式并不是给某个元素用，而是只通过 @extend 指令使用，尤其是在制作 Sass 样式库的时候，希望 Sass 能够忽略用不到的样式。
ass 引入了“占位符选择器” (placeholder selectors)，看起来很像普通的 id 或 class 选择器，只是 # 或 . 被替换成了 %。可以像 class 或者 id 选择器那样使用，当它们单独使用时，不会被编译到 CSS 文件中。

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