一、sass提供匯入機制，可以將頁面的共用較為通用的scss提取出來，這樣方便維護，其他頁面按需匯入相關的scss檔案，避免了所有的樣式都在一個樣式檔案中，一個樣式檔案較為繁重難以維護。

@import "../sass/lesson4";

這樣就匯入了lesson4這個scss檔案，可以使用其中的樣式。

二、測試一下樣式應用的優先順序

1、本檔案下：巢狀結構、非巢狀結構

在本頁面內的<style></style>標籤內直接寫樣式，測試一下巢狀結構和非巢狀結構會應用哪個樣式

.lesson4{
  .test1{
    color: #f527e7;
  }
}
.test1{
  color: #1e18f5;
}
 

這裡我們都定義了一個test1的樣式，結果頁面應用的是巢狀結構中的，改變.test1的位置還是一樣的。

① 稍微改一下，將非巢狀的優先順序置高

.lesson4{
  .test1{
    color: #f527e7;
  }
}
.test1{
  color: #1e18f5 !important;
}

②在標籤上直接寫樣式

測試下來，結論是 ：

在本頁面內寫樣式

直接定義在標籤上的樣式+！important 

>  巢狀結構的樣式+！important 

>  非巢狀結構 + ！improtant

>  直接定義在標籤上的樣式

>  巢狀結構的樣式

>  非巢狀結構的樣式

經過測試，巢狀在內部的樣式比散落在外面的樣式優先順序要高，問題來了，如果同是巢狀，那麼會應用哪一個巢狀的樣式呢？

.lesson4{
  .test1{
    color: #f527e7 !important;
  }
  .test2{
    color: #f527e7 !important;
  }
}
.test1{
  color: #1e18f5 !important;
}
.lesson4-inside{
  .test2{
    color: #1e18f5 !important;
  }
}
 

我們巢狀定義了test2的樣式 ，一個粉色，一個藍色

頁面顯示的是藍色

挪一下程式碼的位置

頁面變成了粉色

測試下來，結論是 ：

同是巢狀結構，以最後的定義為準，後定義的會覆蓋前面的定義

（可以自己試一下去掉！important，都有或者都沒有important後面的會覆蓋前面的，如果前面的有important，後面的沒有，那後面的就覆蓋不了前面的了）

加入匯入的檔案也有定義重複的樣式，那就要看匯入的位置了，如果在最後倒入就會應用匯入的樣式，如果最開始就匯入，就會被覆蓋。

三、！default

sass提供預設值

四、巢狀匯入

詳情看例項demo