Sass 入门篇 —— 学习笔记（二）

一、Sass 的基本特性 - 基础

1. 变量

• 声明变量
  Sass 的变量包括三个部分：

  • 声明变量的符号 “$”
  • 变量名称（如：width）
  • 赋予变量的值（如：200px）

  如：

  $width: 200px;  
  

• 普通变量与默认变量

  • 普通变量

    $fontWeight: bold;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

  • 默认变量
    sass 的默认变量仅需要在值后面加上 !default 即可

    $fontWeight: bold !default;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

    覆盖默认变量只需要在默认变量之前重新声明下变量即可

    $fontWeight: normal; // 在默认变量之前重新声明变量
    $fontWeight: bold !default;  
    
    body {  
       font-weight: $fontWeight;  
    }
    

• 变量的调用

  $fontWeight: bold;  
  
  body {  
     font-weight: $fontWeight; // 调用变量
  }
  

• 局部变量和全局变量
  局部变量：局部变量是拥有局部作用域的变量。只能由声明它的函数或块中访问。

    $color: orange; // 定义全局变量
  
    span {
      color: $color; // 调用全局变量
    }
  

  全局变量：全局变量是在所有作用域都可访问的变量。

    .global {
      $color: orange; // 定义局部变量
  
      p {
        color: $color; // 调用局部变量
      }
    }
  

2. 嵌套

• 选择器嵌套

  比如有这样一段 HTML 结构代码：

    <header>
      <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
      </nav>
    </header>
  

  想选中 header 中的 a 标签，在 CSS 会这样写：

    nav a {
      color: red;
    }
  
    header nav a {
      color: green;
    }
  

  在 Sass 中使用选择器嵌套：

    nav {
      a {
        color: red;
  
        header & {
          color: green;
        }
      }
    }
  

• 属性嵌套
  CSS 有一些属性是前缀相同，后缀不同的，比如：
  border-top/border-bottom。

  .boder {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
  }

而 Sass 可以这样写：

  .border {
    border: { // 注意此处有 ":"
      top: 1px solid red;
      bottom: 1px solid green;
    }
  }

• 伪类嵌套
  伪类嵌套需要借助 "&" 符号一起配合使用，比如我们编译下面的 CSS：

  clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
    overflow: hidden;
  }

Sass 可以这样写：

  .clearfix {
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: bold;
      overflow: hidden;
    }
  }

3. 混合宏

• 声明混合宏

  • 不带参数的混合宏：
    在 Sass 中，使用 @mixin 声明混合宏。如：

      @mixin border-radius {
        -webkit-border-radius: 5px;
        border-radius: 5px;
      }
    

  • 带参数的混合宏：

    @mixin border-radius($redius: 5px) {
      -webkit-border-radius: $redius;
      border-radius: $redius;
    }
  

• 调用混合宏
  在实际调用中，使用 @include 调用混合宏。以上面声明的混合宏为例子：

  button {
    @include border-radius;
  }
  

  编译好的 CSS：

  button {
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }
  

• 混合宏的参数

  • 不带值的参数：

      @mixin border-radius($redius) {
        -webkit-border-radius: $redius;
        border-radius: $redius;
      }
    

    调用时传入参数值：

    .box {
      @include border-radius(3px);
    }
    

  • 带值的参数：

      @mixin border-radius($redius:3px) {
        -webkit-border-radius: $redius;
        border-radius: $redius;
      }
    

  • 多个参数

    @mixin center($width,$height){
      width: $width;
      height: $height;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -($height) / 2;
      margin-left: -($width) / 2;
    }
    

    当传入参数过多时，可以使用参数"..."来替代。

• 继承
  在 Sass 中通过 @extend 来继承已存在的类样式块，如：

  .btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
  }
  
  .btn-second {
    background-color: orange;
    color: #fff;
    @extend .btn;
  }
  

  编译好的 CSS ：

  .btn, .btn-primary, .btn-second { /* 编译出来的 CSS 会将选择器合并在一起，形成组合选择器 */
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
  
  .btn-primary {
    background-color: #f36;
    color: #fff;
  }
  
  .btn-second {
    background-clor: orange;
    color: #fff;
  }
  

• 占位符 %placeholder
  %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码，如：

  %mt5 {
    margin-top: 5px;
  }
  %pt5{
    padding-top: 5px;
  }
  

  以下才会产生代码：

  %mt5 {
    margin-top: 5px;
  }
  %pt5{
    padding-top: 5px;
  }
  
  .btn {
    @extend %mt5;
    @extend %pt5;
  }
  
  .block {
    @extend %mt5;
  
    span {
      @extend %pt5;
    }
  }
  

  编译好的 CSS ：

  .btn, .block {
    margin-top: 5px;
  }
  
  .btn, .block span {
    padding-top: 5px;
  }
  

4. Sass 运算

• 加法
  在变量和属性中都可以做加法运算。如：

  .box {
    height: 20px + 8in;
  }
  

  编译好的 CSS ：

  .box {
    height: 788px;
  }
  

注：携带不同类型的单位时，在 Sass 中计算会报错

• 减法

  $full-width: 960px;
  $sidebar-width: 200px;
  
  .content {
    width: $full-width -  $sidebar-width;
  }
  

  编译好的 CSS ：

  .content {
    width: 760px;
  }
  

• 乘法
  乘法运算能够支持多种单位（em, px, %），但两个值单位相同时，只需要为一个数值提供单位即可：

  .box {
    width: 10px / 2;
  }
  

  编译好的 CSS ：

  .box {
    width: 5px;
  }
  

• 变量计算

  $content-width: 720px;
  $sidebar-width: 220px;
  $gutter: 20px;
  
  .container {
    width: $content-width + $sidebar-width + $gutter;
    margin: 0 auto;
  }
  

  编译好的 CSS ：

  .container {
    width: 960px;
    margin: 0 auto;
  }
  

• 颜色运算
  颜色运算是分段运算的，也就是红、绿、蓝各颜色分段单独运算。如：

  p {
    color: #010203 + #040506;
  }
  

  计算公式为: 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09
  编译好的 CSS ：

  .container {
    width: 960px;
    margin: 0 auto;
  }
  

• 字符运算
  字符运算通过加法符号 "+"对字符串进行连接。如：

  $content: "Hello" + "" + "Sass!";
  .box:before {
    content: " #{$content} ";
  }
  

  编译好的 CSS ：

  .box:before {
    content: " Hello Sass! ";
  }
  

  ---

  只有强者才懂得斗争；弱者甚至失败都不够资格，而是生来就是被征服的。
  希望此文章能够帮助你。

  欢迎关注我的博客网站。