過往一支 CSS 檔打天下，從頭寫到尾，動則上千上萬條程式碼，維護不易，之前我們介紹了 scss 的變數功能，讓一些關鍵的設定可以透過變數的型式撰寫。

如今，為了要讓工程師們能夠更輕鬆的管理 scss 檔，延續我們前一篇文章的 all.scss 檔內容，這次我們可以改使用@import功能來將本來的 all.scss 檔內的內容全部分拆成各自專屬的 scss 檔，然後再用@import的方式導入進all.scss。

所以原來的 all.scss 內容會全部清空，然後只留下以下的內容。

@import “variable”;
@import “reset”;
@import “main”;

再來就是將原本 all.scss 內的變數內容直接存入 "_variable.scss" 檔。

$title-color:orange;
$text-color:green;
$background-color: pink;
$base-color:yellow;
$link-color:blue;
$width:960px;
$spacer:30px;
$font-m:16px;
$font-l: $font-m*1.5;
$font-xl: $font-l*1.5;
$font-family-title:”monospace”;
$font-family-base: “Helverica,Ariel,sans-serif”;

再將以下其餘我們撰寫的 scss 內容存入"_main.scss"。

*{
  box-sizing: border-box;
}
.clearfix{
 clear:both;
}
.wrap{
 max-width: $width;
 margin: 0 auto;
}
.header{
  background: $background-color;
  padding:$spacer;
  h1{
    color:$title-color;
    font-size: $font-xl;
    font-family: $font-family-title;
    padding:$spacer/2;
  }
  li{
    h2{
      background-color: $background-color;
      font-size: $font-l;
      font-family: $font-family-title;
      padding:$spacer/3;
      a{
        color:$link-color;
      }
    }
    p{
      color:$text-color;
      font-size: $font-m;
      font-family: $font-family-base;
      padding:$spacer/3
    }
  }
}
.content{
  width: 100%;
  li{
    float:left;
    width: 31.33333%;
    height: 300px;
    margin:$spacer/2 1%;
    background: $base-color;
  }
  .light{
    background: lighten($base-color,20%);
  }
  .dark{
    background: darken($base-color,20%);
  }
}

最後，上 meyerweb.com 將 CSS Reset 的內容 copy 下來貼到"_reset.scss"的檔案，就大功告成了。

然後你的資料夾應該就會變成以下這個樣子。

這個範例只是簡單的先將之前的 all.scss 檔拆分成3個 scss，未來還會有更多的專用 scss 檔，也是用@import 的方式進入 all.scss，所以以後在 CSS 的管理上就苦以更加的精準與不費力。
再來我們準備來介紹@mixin功能囉，當然也會循這章的方式，用@import的方式來導入，我們下次見。