Sass 学习笔记

1. 什么是Sass

css预处理器，帮助你书写更简单、可维持的css。

---

2. Sass的特征

• 变量（variable）帮助你存储需要重复使用的值；

• 嵌套（nesting）让你书写更少的选择器；

• partials(_base.scss) 和@import让你的CSS更加模块化，并且编译为一个css文件，减少http请求；

• Mixin 让你创建一组可重复使用的CSS声明，每次使用只需要@inclue，并且可使用变量自定义值；

• Extend共享一组css规则，使css更简洁；

• 运算符：方便运算

---

3. Sass语法

3.1. 嵌套规则

---

• 普通嵌套

应用场景：避免重复书写父元素，让复杂嵌套书写更简单

• &指代父元素

应用场景： 父元素有其他用法
比如伪类；在其他元素有class时给父元素样式

• 命名空间：

应用场景： 减少background, font这种复合元素分开写的重复

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

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

===========&指代父元素==========================

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

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

============命名空间==========================

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

3.2 注释

---

• /* */为多行注释;//单行注释。多行注释在输出时会保留，单行注释不会。

• 多行注释以!开头，即使在压缩模式下也会被保留。有利于版权等关键信息的保留。

3.3 SassScript

---

• 变量

应用场景： 多次使用某个值
以$开头，在某个嵌套内部声明的变量只能在该内部使用，之外的变量则为全局变量。变量后加上!global则变为全局变量。

• 数据类型
  1.数字、字符串（有无“”）、颜色、布尔值、null、list（用空格或都好隔开）， map(键值对)

2.#{}内的字符串解析时会去掉引号；
3.nth(list/map, index)获取第几项，从1开始；
4.join(list1, list2, seperator)：合并为一个新的list
5.append(list1, list2, seperator)：返回新的list

• 运算符
  1./：在作为变量、函数、不是list的括号内、与其他运算符一起时进行除法运算，其余情况作为普通的css.

2.-：作为减法，尽量两边有空格，负号运算符在前面有空格，作为list最好用括号包围。
3.颜色运算符：分段运算(# 01|02|03)， 对于透明度，有opacity(color, alpha), transparentize(color, alpha)。
4.字符串运算符：根据左边的字符判断最终结构是否有引号。
5.布尔运算符（and, or, not）
6.list不支持运算符，请使用函数

• 变量默认值!default：当变量未被赋值时，使用!default的值,!default的值不能重定义；

3.4 @-rules 和指令

---

1. @import: 引入其他文件。并且会将引入的文件也编译到最后的文件中。import文件中的变量,mixin也可在主文件中使用。

应用场景：样式的模块化；减少Link请求数量

=== example.sass ====
.example {
  color: red;
}    

=== main.sass === 
#main {
  @import "example";
}

==== compiled to ====
#main .example {
  color: red;
}

- 引入多个文件
`@import ‘base’, ‘test’`

1. @media

应用场景：媒体查询时不用重复写选择器

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

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

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

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}
=== Compiled to ===
@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }

在不同的选择器中写同一套媒体查询怎么解决？
什么时候用#{}, 什么时候用变量？

1. @extend

应用场景：一个类需要另一个类的全部css样式时。比如bootstrap中的btn, btn-success。若使用html，则两个类必须同时使用，增加维护负担。

1. @at-root：让嵌套里的元素，使用在文件最外层。打破嵌套规则。@at-root(with/widthout)让元素在指令之外。

2. 调试：

   • @debug: 输出sassScript结果；

   • @warning: 控制用户输入变量等，可用—quiet关掉

   • @error 输出错误

3.5 条件控制

---

1. if(boolean, trueValue, falseValue):

2. @if：条件满足时使用样式，比如导航active就colour：green；

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

1. @for $i from start to/through end:through包括end, to不包括，$i可在循环中使用。

2. @each in list/map

3. @mixin一组重用的css, 使用@include引入，可携带参数。

   • @include里的内容会应用在mixing中的@content的位置。

   • @content中的变量只在@content的中块中使用，否则解析为全局变量

3.6 函数

---

1. function

@function name (param) {
     @retutn
} 

3.7 产出css

---

1. —nested: 产出嵌套的css;

2. —expanded:常写的css， 无嵌套;

3. —compat:一个选择器一行；

4. —compressed:所有的都写在一行；