Python SCSS與Compass/Blueprint輕鬆整合

身為網頁的開發者，相信在寫CSS時總會覺得少了什麼，很多風格明明都只差了一兩句，就得複製貼上或是重寫好幾次，此時你會想說如果有個import或是繼承CSS樣式的語法就好了、如果能夠訂義變數然後在CSS語法裡做加減乘除就好了，而事實上這些SCSS與SASS都可以幫你做到，它是一種將CSS擴充的一種語言，先用SCSS或SASS寫好網頁的排版，接著再用工具將其編譯成CSS檔

取此官網的例子，例如你可以這樣寫

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

事先定義好變數，然後在裡面使用，這還只是小小的功能之一，它還可以繼承、引入，比起直接寫CSS方便了許多

搭配上Compass/Blueprint的CSS框架，寫起來更是輕鬆愉快，想要重設CSS嗎? 很簡單

@import "compass/reset"
@include blueprint-global-reset;

@import “compass/reset” 是指引入compass/rest這個模組，然後@include blueprint-global-reset;是指將SCSS的語法片段插入此處，如此一來就輕鬆地重設了CSS，然而，這只不過是小菜一盤

想要採用CSS3，但是又對於-moz、-webkit、-ms … 那些數不清的非標準前綴感到噁心嗎? Compass也提供了輕鬆的寫法

@import "compass/css3";

.rotated-fonts {
    @include rotate(-45deg);
    @include apply-origin(0% 50%, false);
}

產生後的結果

.rotated-fonts {
  -moz-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform-origin: 0% 50%;
  -webkit-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

夠簡單吧? 原本讓人快抓狂的N種瀏覽器支援一句就搞定了

那你問SCSS和SASS差在哪裡? 事實上是一樣的東西只差別在語法，SCSS的語法是以CSS做為基礎延申的，較容易懂，而SASS的語法是和CSS無關，重新設計過的語法

與Python整合

你說: “等等! SASS不是Ruby on Rails的工具嗎?” 是沒錯，但是有人將SCSS的編譯器移植到Python的環境下，叫PyScss，有了它就可以用Python來編譯SCSS，然而雖然說可以編譯，但是直接使用PyScss有點難用，而且和Compass/Blueprint要合在一起使用還得自己去找那些框架的檔案設到load_paths使用，因此我寫了一個open source的小工具叫 scss_tools，使用方法非常簡單，先是安裝

pip install scss_tools

然後以YAML語法寫一個簡單的設定檔

---

monitor:
    # path to Scss directory for monitoring
    scss_dir:
        scss

compiler:
    # verbosity of message output
    verbosity: 2

    # compress
    compress: True

    # debug info
    debug_info: False

    # root of static files
    static_root:
        static

    # directory to output sprite images
    asset_root:
        static/asset

    # paths to import
    load_paths: [
        static/scss
    ]

    # path of input files and path of file to output
    scss_files: [
        [scss/style.scss, static/style.css],
        [scss/style2.scss, static/style2.css],
    ]

...

接著是執行指令

scss_monitor -c scss.yaml

就是這麼簡單，這樣一來它就會監視你設定檔裡指定的目錄，一但檔案有改變的話，會自動幫你重新編譯一次，如此一來你就可以專心寫SCSS，讓自動編譯的工作交給工具去做

相關資訊

PyPi網址: http://pypi.python.org/pypi/scss_tools

Bitbucket Hg repo: https://bitbucket.org/victorlin/scss_tools