sass学习

sass是css的扩展

可申明变量

$main-fonts: Arial, sans-serif;
$headings-color: green;

h1 {
  font-family: $main-fonts;
  color: $headings-color;
}

Sass 嵌套 CSS

nav {
  background-color: red;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

可以化为以下代码：

nav {
  background-color: red;

  ul {
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

用 Mixins 创建可重用 CSS
在 Sass 中，mixin 是一组 CSS 声明，可以在整个样式表中重复使用。
随着浏览器的不断升级，使用这些 CSS 规则时可能需要添加浏览器前缀。如：

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

可用以下代码代替：

@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
} 

定义以 @mixin 开头，后跟自定义名称。 参数（ $ x，$ y，$ blur，以及上例中的 $ c ）是可选的。 现在在需要 box-shadow 规则的地方，只需一行 mixin 调用而无需添加所有的浏览器前缀。 mixin 可以通过 @include 指令调用

div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

使用 @if 和 @else 为样式添加逻辑

Sass 中的 @if 指令对于测试特定情况非常有用——它的工作方式与 JavaScript 中的 if 语句类似，如：

@mixin make-bold($bool) {
  @if $bool == true {
    font-weight: bold;
  }
}

可以在 Sass 中使用 @else if 和 @else 测试更多条件：

@mixin text-effect($val) {
  @if $val == danger {
    color: red;
  }
  @else if $val == alert {
    color: yellow;
  }
  @else {
    color: black;
  }
}

于if-else语句相似。

使用 @for 创建一个 Sass 循环

@for 以两种方式使用：“开始 through 结束” 或 “开始 to 结束”。 主要区别在于“开始 to 结束”不包括结束数字，而“开始 through 结束”包括 结束号码。

@for $i from 1 through/to 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

当 Sass 文件转换为 CSS 时，效果如下：

.col-1 {
  width: 8.33333%;
}
.col-2 {
  width: 16.66667%;
}
...
.col-12 {
  width: 100%;
}

使用 @each 遍历列表中的项目

Sass 还提供 @each 指令，该指令循环遍历列表或映射中的每个项目。 在每次迭代时，变量将从列表或映射分配给当前值。

@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

map 的语法略有不同，需要用 $ key 变量来引用 map 中的键：

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}

以上两个代码都可转为以下css：

.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

使用 @while 循环创建样式

$x: 1;
@while $x < 13 {
  .col-#{$x} { width: 100%/12 * $x;}
  $x: $x + 1;
}

效果与上述@for循环相同。

Partials 将样式分成小块

Sass 中的 Partials 是包含 CSS 代码段的单独的文件。 这些片段可以导入其它 Sass 文件使用。 可以把类似代码放到模块中，以保持代码结构规整且易于管理。

partials 的名称以下划线（_）字符开头，这样 Sass 就知道它是 CSS 的一小部分，而不会将其转换为 CSS 文件。 此外，Sass 文件以 .scss 文件扩展名结尾。 要将 partial 中的代码放入另一个 Sass 文件中，使用 @import 指令。

将一组 CSS 样式扩展到另一个元素

Sass 有一个名为 extend 的功能，可以很容易地从一个元素中借用 CSS 规则并在另一个元素上重用它们。
如存在以下代码：

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}

现在需要一个差不多的功能的代码，但复制过来需要空间，所以：

.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}

比.panel相比多了width和font-size的属性。