freeCodeCamp 旅途13 - Sass

Sass

Sass，英文全称“Syntactically Awesome StyleSheets”，是对 CSS 的扩展。它添加了一些 CSS 语法不具有的新特性。Sass 让开发者维护样式表变得更简单。

Sass 有两种语法。第一种被称为 SCSS（Sassy CSS），它是 CSS 语法的扩充版本。也就是说，CSS 样式表也是合法的 SCSS 文件。这种语法的样式表文件以 .scss 为扩展名。

第二种比较古老的语法，就是所说的缩排语法（或者直接就称为“Sass”），它不使用花括号，而是通过缩排的方式来表达选择符的嵌套层级，它也不使用分号，而是用换行符来分隔属性。此种语法的样式表文件需要以 .sass 作为扩展名。

Sass：用 Sass 变量存储数据

<style type='text/sass'>
$main-fonts: Arial, sans-serif;
$headings-color: green;
//To use variables:
h1 {
  font-family: $main-fonts;
  color: $headings-color;
}
</style>

Sass：用 Sass 嵌套 CSS

nav {
  background-color: red;
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

Sass：用 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;
}
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

Sass：使用 @if 和 @else 为你的样式添加逻辑

<style type='text/sass'>
  @mixin border-stroke($val) {
  @if $val == light  {
    border: 1px solid black;
  }
  @else if $val == medium  {
 border: 3px solid black;
  }
  @else if $val == heavy  {
    border: 6px solid black;
  }
  @else {
    border: none;
  }
}
  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
  }  
</style>

Sass：使用 @for 创建一个 Sass 循环

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

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

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

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

Sass：使用 @while 当条件满足时样式生效

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

$x:1;
@while $x < 11 {
  .text-#{$x} {
    font-size: 2px + 10px*$x;
    $x: $x + 1;
  }
}

Sass：用 Partials 将你的样式分成小块

如果所有mixins都保存在名为 "_mixins.scss " 的partial中，并且在"main.scss "文件中需要它们，这是如何在主文件中使用它们：

// In the main.scss file
@import 'mixins'

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

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

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}