CSS 它有先後順序，後面會蓋掉前面！

<link rel="stylesheet" href="style/style1.css">
<link rel="stylesheet" href="style/style2.css">

style1 排第一、styel2排第二
如果都有一個class「.box」命名設定，那後面的style2，內容的指定就會蓋掉
如果同一隻css，但有同樣的 class 命名，一樣後面的設定會蓋掉前面
（如下圖）

在HTML語法可以引入很多支 CSS（尤其是大型網站分的就更細些）如：

<link rel="stylesheet" href="style/reset.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/page.css">
<link rel="stylesheet" href="style/style.css">

而在 SASS 也有類似這個設定！在這裡用的是 @import
＠import 讓SASS有了模組化的概念
那前置作業就是將各單元的CSS切割出來import

如：

@import "variable";  //變數，重點提醒排序要在前面 
@import "reset";  // reset.css    
@import "base"; // 基本
@import "layout"; // 共同框架,第一層
@import "module"; //button,form,table 的設定
@import "pages/..."; //各頁面
@import "vendor"; // 統一放入別人的CSS
........

除了某些制定的命名外，依個人習慣做分類
但重點結構一定是**reset、Base、mixin／variable **先載入
後面的CSS才能讀到前面的設定來進行覆蓋樣式，否則會無法編譯或是排版錯誤。