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:全部的都写在一行；