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

This entry was posted in Python, 中文文章, 分享 and tagged , , , , , , , . Bookmark the permalink.

One Response to Python SCSS與Compass/Blueprint輕鬆整合

  1. 高見龍 says:

    “等等! SASS不是Ruby on Rails的工具嗎?” <– 其實不是喔
    它只是需要Ruby,但並不需要Rails
    Ruby != Rails :P

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>