四、基本特性

• 宣告變數
  使用$開頭：

  

  在值後面加！default表示預設值。eg：
  $btn-primary-color : #fff !default;
  在預設變數之前重新聲明後即可覆蓋它：

      $baseLineHeight: 2;
      $baseLineHeight: 1.5 !default;
      body{
          line-height: $baseLineHeight; 
      }
      編譯後的css程式碼：
      body{
          line-height:2;
      }

• 區域性變數和全域性變數

  //SCSS
   
  
  $color: orange !default;//定義全域性變數(在選擇器、函式、混合巨集...的外面定義的變數為全域性變數)
  .block {
    color: $color;//呼叫全域性變數
  }
  em {
    $color: red;//定義區域性變數
    a {
      color: $color;//呼叫區域性變數
    }
  }
  span {
    color: $color;//呼叫全域性變數
  }

• 巢狀
  1.選擇器巢狀

  <header>
  <nav>
      <a href=“##”>Home</a>
      <a href=“##”>About</a
   
  >
      <a href=“##”>Blog</a>
  </nav>
  <header>
  
  如果我們想選中header中的a標籤，在css中這樣寫：
  nav a{
      color:red;
  }
  header nav a{
      color:green;
  }
  
  那麼在Sass中可以這樣寫：
  nav{
      a{
          color:red;
          header &{
              color:green;
          }
      }
  }

  2.屬性巢狀

  .box {
      border-top: 1px solid red
   
  ;
      border-bottom: 1px solid green;
  }
  
  那麼在Sass中可以這樣寫：
  .box {
    border: {
     top: 1px solid red;
     bottom: 1px solid green;
    }
  }
  

  3.偽類巢狀

  .clearfix{
  &:before,
  &:after {
      content:"";
      display: table;
    }
  &:after {
      clear:both;
      overflow: hidden;
    }
  }
  編譯後：
  clearfix:before, .clearfix:after {
    content: "";
    display: table;
  }
  .clearfix:after {
    clear: both;
    overflow: hidden;
  }

  注意：避免選擇器巢狀！