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 雷同的属性。
发表回复