Sass

Sass (Syntactically Awesome StyleSheets)是CSS语言的扩展。它拥有一些原生CSS不能实现的功能，让项目的样式代码变得更为简单，更容易维护。

Sass本质上是一个编译器，它使用Sass语法写代码，然后转换成CSS语言，因此我们在使用的时候可以创建变量、嵌套CSS规则、引入其他的Sass文件，这使得代码更紧凑，也更容易阅读。

Sass允许两种语法形式，一种是SCSS（Sassy CSS），也是这一部分习题使用的语法，它是CSS语法的扩展，也就是说所有的有效的CSS样式表在SCSS文件中都能够使用，而且语义相同，这类语法文件使用.scss后缀。另一种是缩进语法，或者直接被称为Sass，它使用缩进而不是括号来表示选择器的嵌套，使用转行而不是分号来切分属性设置。这类文件使用.sass后缀。

课程习题主要介绍了Sass的一些基本语法。我参考Sass的官网把内容整理了一下。

• Sass (Syntactically Awesome StyleSheets)是CSS语言的扩展。它拥有一些原生CSS不能实现的功能，让项目的样式代码变得更为简单，更容易维护。

  Sass本质上是一个编译器，它使用Sass语法写代码，然后转换成CSS语言，因此我们在使用的时候可以创建变量、嵌套CSS规则、引入其他的Sass文件，这使得代码更紧凑，也更容易阅读。

  Sass允许两种语法形式，一种是SCSS（Sassy CSS），也是这一部分习题使用的语法，它是CSS语法的扩展，也就是说所有的有效的CSS样式表在SCSS文件中都能够使用，而且语义相同，这类语法文件使用.scss后缀。另一种是缩进语法，或者直接被称为Sass，它使用缩进而不是括号来表示选择器的嵌套，使用转行而不是分号来切分属性设置。这类文件使用.sass后缀。

  课程习题主要介绍了Sass的一些基本语法。我参考Sass的官网把内容整理了一下。

  使用变量

  变量声明 $highlight-color: #F90

  • 变量可以是以空格分割的多个属性值 $basic-border: 1px solid black
  • 变量可以使以逗号分割的多个属性值 $plain-font: "Myriad Pro", Myriad, Helvetica
  • Sass变量也有作用域，在{}规则块内定义的变量只能在规则块内使用

  变量引用

  • 直接引用 border: $highlight-color

  命名规则

  • 中划线-和下划线_都可以使用

  • 两种写法互通 $link-color和$link_color指向同一个变量

嵌套CSS规则

• 避免重复书写 #content article h1 {} #content article p {}

• 使用大括号嵌套即可

  #content {
    background-color: #f5f5f5;
    aside {
      background-color: #eee;
    }
  }
  

伪类选择器使用标识符&

• Sass解析时，将父子类的选择器通过空格连接到子选择器的前面

• 伪类如:hover通过这种方法会出问题，所以在前面放一个&

  article a {
    color: blue;
    &:hover { color: red }
  }
  

子组合选择器>,+,~

• a > b选择a元素的直接子元素b
• a + b选择紧跟a的b元素
• a ~ b选择紧跟a元素的同层b元素，不论它们之间隔了多少其他元素

属性嵌套

• 属性嵌套的规则是把属性名从中间-的地方断开，在根属性后边添加一个冒号

  nav {
    border {
      style: solid;
      width: 1px;
      color: #ccc;
    }
  }
  

导入文件

@import规则

• 在生成css文件时就把相关文件导入进来，无需发起额外的下载请求
• 引入的文件可以省略.sass或scss文件后缀

默认变量值 $link-color: blue !default;

嵌套导入

混合器

• 大段样式的重用

• @mixin标识符定义混合器

• @include使用混合器

• 混合器传参

  @mixin link-colors($normal, $hover, $visited){
    color: $normal;
    &:hover { color: $hover; }
    &:visited { color: $visited }
  }
  

继承

• 一个选择器可以继承为另一个选择器定义的所有样式

• @extend

  .error {
    border: 1px solid black;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
  

控制指令

@if

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

@for

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@each $animal, $color, $cursor in (puma, black, default),
                                  (sea-slug, blue, pointer),
                                  (egret, white, move) {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

@while

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

以下是这部分的习题解答：

---

Introduction to the Sass Challenges

• Store Data with Sass Variables

  Sass不同于CSS的一点是，Sass可以使用变量。方法与JavaScript类似，需要声明变量，数据会被保存起来。

  JavaScript声明变量使用let和const关键字，Sass则用$后接变量名。

  当一些元素都使用相同的颜色的时候，使用变量会很方便，更改颜色的时候只需要更改变量值即可。

    $text-color: red;
    
    .header{
      text-align: center;
    }
    .blog-post, h2 {
      color: $text-color;
    }
  

  ---

• Nest CSS with Sass

  Sass允许CSS规则嵌套，这能很好地帮助我们管理代码

    .blog-post {
      h1 {
      text-align: center;
      color: blue;
    }
    p {
      font-size: 20px;
      }
    } 
  

  ---

• Create Reusable CSS with Mixins

  在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来保存这一组代码，并且使用参数来保证我们可以修改里面的值：

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

  调用mixin的时候需要使用@include关键字

    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
      -moz-border-radius: $radius;
      -ms-border-radius: $radius;
      border-radius:$radius;
    }
    
    #awesome {
      width: 150px;
      height: 150px;
      background-color: green;
      @include border-radius(15px);
    }
  

  ---

• Use @if and @else to Add Logic To Your Styles

  @if语句可以用来做条件判断，和JavaScript一样，Sass也有@else if和@else语句

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

  ---

• Use @for to Create a Sass Loop

  Sass中的@for循环和JavaScript中的for循环用法类似，它有两种写法：

  • start through end 包括end
  • start to end不包括end

  例子：

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

  习题解答

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

  ---

• Use @each to Map Over Items in a List

  each方法用于遍历元素，如：

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

  另一种写法是给出一组键值对形式的值来遍历，使用@each语法时需要带上$key

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

  习题解答：

  @each $color in blue, black, red {
    .#{$color}-bg {background-color: $color;}
  }
  
  div {
    height: 200px;
    width: 200px;
  }
  

  ---

• Apply a Style Until a Condition is Met with @while

  @while方法类似于JavaScript中的while循环，它的使用规则是循环创建CSS规则，直到条件满足。前面提到 的用@for循环创建栅格化布局的例子也可以使用@while来实现

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

  习题解答：

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

  ---

• Split Your Styles into Smaller Chunks with Partials

  partial在Sass中指的是CSS代码模块，可以在其他的Sass文件中被引入和使用。它允许我们更好地管理模块中的代码。

  partial代码有以下特征：

  • 文件以_开头，告诉Sass这是一个代码块，不要转换成CSS文件
  • 文件保存在.scss文件中
  • 引用时使用@import关键字,@import时不需要带_

  /* mixins存在名为"_mixins.scss"的partial中 */
  /* In the main.scss file */
  
  @import 'mixins'
  

  引入mixins之后，partial中的所有代码、变量都可以直接被使用

  // The main.scss file
  
  @import 'variables'
  

  ---

• Extend One Set of CSS Styles to Another Element

  Sass有一个特性叫做extend扩展，它允许我们将一个元素的CSS样式“借”来给另一个元素使用。

  比如我们设置一个元素.panel的css样式如下：

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

  这时另一个元素.big-panel拥有.panel相同的样式，此外，它还设置了width，font-size样式，那么我们可以直接将.panel的样式搬过来使用

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

  写法是@extend加上元素名

  习题解答：

  .info-important {
    @extend .info;
    background-color: magenta;
  }