关于前端: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;}