关于前端:Sass-笔记

Sass

Sass 全称 “Syntactically Awesome StyleSheets”, 是 CSS 的一种扩大语言。

变量 Variable

Sass 容许应用变量（最新的 CSS 也反对了变量）。能够在 Sass 中申明变量，并为它赋值。

在 Sass 中，变量以 $ 结尾的，后跟变量名。

 $text-color: red;

应用

color: $text-color;

嵌套 CSS Nest

Sass 容许 CSS 规定的嵌套，这在组织样式表构造的时候会很有用。

在 CSS 里，每个元素的款式都须要写在独立的代码块中，如下所示：

nav {background-color: red;}

nav ul {list-style: none;}

nav ul li {display: inline-block;}

对于一个大型项目，CSS 规定会很简单。这时，引入嵌套性能（即在对应的父元素中写子元素的款式）能够无效地简化代码：

nav {
  background-color: red;

  ul {
    list-style: none;

    li {display: inline-block;}
  }
}

Mixins 可重用 CSS Reusable

在 Sass 中，mixin 是一组 CSS 申明，能够在整个样式表中重复使用。

CSS 的新性能须要一段时间适配后，所有浏览器后能力齐全应用。随着浏览器的一直降级，应用这些 CSS 规定时可能须要增加浏览器前缀。思考 box-shadow：

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

对于所有具备 box-shadow 属性的元素重写此规定，或者更改每个值以测试不同的成果，须要破费大量的精力。Mixins 就像 CSS 的函数。以下是一个例子：

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

相似 JavaScript，能够在 Sass 中应用 @else if 和 @else 测试更多条件：

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

@for 循环

在 Sass 中应用 @for 循环增加款式，它的用法和 JavaScript 中的 for 循环相似。

@for 以两种形式应用：“开始 through 完结”或“开始 to 完结”。次要区别在于“开始 to 完结”不包含 完结数字，而“开始 through 完结” 包含 完结数字。

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

@for $i from 1 to 6{.text-#{$i} {font-size: 15px * $i;}
}

#{$i} 局部是将变量（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 的语法略有不同。这是一个示例：

$colors: (color1:blue, color2:red, color3:green);
@each $key, $color in $colors {.#{$color}-text {color: $color;}
}

请留神，须要用 $key 变量来援用 map 中的键。否则，编译后的 CSS 将蕴含 color1，color2…… 以上两个代码示例都转换为以下 CSS：

.blue-text {color: blue;}

.red-text {color: red;}

.green-text {color: green;}

@while 循环

Sass 中的 @while 指令与 JavaScript 中的 while 相似。只有满足条件，它就会始终创立 CSS 代码。

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

Partials

Sass 中的 Partials 是蕴含 CSS 代码段的独自的文件。这些片段能够导入其它 Sass 文件应用。能够把相似代码放到模块中，以放弃代码构造规整且易于治理。

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

例如，如果所有 mixins 都保留在名为“_mixins.scss”的 partial 中，并且在“main.scss”文件中须要它们，上面是应用办法：

@import 'mixins'

请留神，import 语句中不须要下划线——Sass 晓得它是 partial。将 partial 导入文件后，能够应用所有变量、mixins 和其它代码。

extend

Sass 有一个名为 extend 的性能，能够很容易地从一个元素中借用 CSS 规定并在另一个元素上重用它们。

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

当初须要另一个名为 .big-panel 的面板。它具备与 .panel 雷同的根本属性，但还须要 width 和 font-size。能够从 .panel 复制并粘贴初始 CSS 规定，然而当增加更多类型的面板时，代码会变得反复。extend 指令是一种重用为一个元素编写的规定的简略办法，能够为另一个元素重用并增加更多规定：

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

除了新款式之外，.big-panel 将具备与 .panel 雷同的属性。