原生 CSS 的預處理器:Myth 介紹與使用

昨天閱讀 CSS Secret 時,作者提到了 Myth 這套預處理器,所以研究了一下如何搭配 gulp 作到自動化編譯(compile),以及如何結合 compass 作到 double 自動化 XDD。

Myth 介紹

免不俗的,先來介紹 Myth 吧!他跟 SASS, LESS 有點像又不太像,相同的地方在於他們都是 CSS 的預處理器,不同的是,SASS & LESS 有自己的規則跟語法(例如 mixin, extend)是原生 CSS 不支援的,而 Myth 的所有語法都是原生 CSS 的 spec,就算不用 Myth 編譯也可以在瀏覽器正常瀏覽。

但是,因為瀏覽器還沒有全面支援各種原生 CSS 的 spec,例如之前介紹過的 CSS 變數,所以我們可以利用 Myth 編譯 CSS,假使以後這些 spec 都開放支援了,直接把 Myth 摘除也不會有影響,非常方便!

有哪些原生的 CSS 需要編譯呢?其實功能不多,只有四個 XDD,我直接擷取 Myth 網站的圖片如下:

Variable 與 Math

再次強調,想了解 CSS Variable 可參考我之前寫的文章:CSS 原生變數介紹,不過 Myth 沒辦法支援 CSS Variable 所有功能,像是強大的「繼承」功能就無法支援。

我們都知道,所謂「編譯」就是將 CSS 語法寫死,不管是 SASS, LESS, 或是 Myth,即使在寫的時候靈活度很高,但是編譯出來的語法就是固定的。而 CSS variable 是原生的 CSS 語法,跳過編譯這個階段,可以讓語法更加靈活,尤其是前面提到的繼承功能 (這邊扯遠了,有興趣就看我那篇文章啦 XD)

Math 就是calc()語法的應用。

calc()是原生 CSS 裡很強大的一個「活用」語法,他本身是不需要再次被編譯的,但因為calc()可以加入變數作運算,因為牽扯到變數,所以我們需要編譯他們。

Color 與 Prefixes

未來color()也能像 SASS 一樣有lighten()這一類的數值調整,有興趣閱讀 spec 的朋友可以參考 W3C 的 draft:Modifying Colors: the color-mod() function

最後是針對瀏覽器添加的 prefix,以 Compass 為例,我們會寫:

@include transition(color .2s);

以編譯成:

-moz-transition: color .2s;
-o-transition: color .2s;
-webkit-transition: color .2s;
transition: color .2s;

但 Myth 不需要加上@include這一類的函式,我們只要寫一行transition: color .2s;,就可以編譯成相容瀏覽器的語法。

以上就是 Myth 提供的四個核心語法。

如果你有興趣玩玩原生 CSS 的最新函式,也許可以考慮使用 Myth 幫你編譯唷!


安裝與使用 Myth,並搭配 gulp 自動化編譯

請先安裝 myth 這個套件,請使用 npm 套件管理:

$ npm install -g myth

他的使用方法很簡單~,假設我們在 input.css 寫好檔案,想把它編譯成 output.css,只要使用myth指令即可:

$ myth input.css output.css
# 將 input.css 編譯成 output.css

當然,每次要這樣輸入還蠻累的,所以可以搭配gulp-myth自動化工具。他除了支援 gulp 之外也有支援 grunt,不過我比較喜歡用 gulp,所以只提供 gulp 的設定方法 XD,如果你自己有在用 grunt,想必如何設定對你也不是難事啦😊 ~

專案目錄結構

先假設我們的專案目錄結構如下:

├─ dev/
|   ├─ style.css 
|   └─ base.css
├─ build/
|   ├─ style.css 
|   └─ base.css
|  gulpfile.js
└─ index.html

我們會在 dev/ 底下開發 CSS 檔案,最後希望透過 Myth 幫我們編譯到 build/ 目錄下。

⚒ 先安裝 gulp-myth

$ npm install --save-dev gulp-myth

⚒ 新建 gulpfile.js 檔案

var gulp = require('gulp'),
    myth = require('gulp-myth');

gulp.task('myth', function(){
  gulp.src('dev/*.css')
    .pipe(myth())
    .pipe(gulp.dest('build/'));
})

gulp.task('watch',function(){
  gulp.watch('./dev/*.css',['myth']);
});

gulp.task('default',['myth','watch']);

最後到 terminal 執行gulp就大功告成啦!只要寫好 CSS,就可以透過 gulp 自動幫你編譯成另外一個 CSS,並存放至 build/ 目錄底下唷!


利用 gulp 結合 Compass 與 Myth

Myth 的存在並不是為了取代各種預處理器,透過前面的介紹,希望各位能理解它們存在的意義。Myth 的網站也清楚地提到:

You can still use variables and math functions, just like you do in preprocessors.

所以接下來讓我們試著把這兩個預處理器合在一起吧 ~

我自己使用的預處理器是 Compass,所以等等一樣只以 Compass 做例子,然後這次的目錄結構更改如下:

├─ sass/
|   ├─ style.scss 
|   └─ base.scss
├─ stylesheets/
|   ├─ style.css 
|   └─ base.css
|  gulpfile.js
|  config.rb
└─ index.html

ps. 記得要先compass create啊 XDDD

⚒ 先安裝 gulp-compass

$ npm install gulp-compass --save-dev

⚒ gulpfile.js 設定如下

var gulp = require('gulp'),
    compass = require('gulp-compass'),
    myth = require('gulp-myth');

gulp.task('compass', function(){
  gulp.src('sass/*.scss')
    .pipe(compass({
      config_file: 'config.rb',
      css: 'stylesheets',
      sass: 'sass'
  }))
  .pipe(myth())
  .pipe(gulp.dest('stylesheets/'));
})

gulp.task('watch',function(){
  gulp.watch('./sass/*.scss',['compass']);
});

gulp.task('default',['compass','watch']);

最後同樣到 terminal 執行gulp就完成了。利用 gulp 自動化工具,會先將 scss 檔案編譯完成,再交給 myth 編譯,最後再覆蓋到 stylesheets/ 目錄下。


以上兩種方法提供給各位參考,有興趣使用 Myth 的朋友也可以玩玩看唷~

昨天在看某篇技術文章時,看到最後心有戚戚焉,節錄如下:

大家大可不必過分在意一點點的 CSS 細節,CSS對於產品的商業價值有,但是到了一定階段以後,實際上就有限,或者說很難直觀的體現,或者說性價比就不高了。

以現在瀏覽器的渲染性能以及我們實際的開發需求,就算有差異,有價值嗎,肯定沒有!

大環境如此浮躁,你會發現,自己遇到的困境並不是技術成長遇到了瓶頸,而是根據不需要你這方面進一步的技術成長,來,幹點收益更明顯的事情!

我想,很多前輩技術博客斷掉了,怕也是人在職場,身不由己!

我能不能走出一條不一樣的路呢?

玩這些新的技術到底對現在的工作 / 生活有沒有幫助?其實想想還蠻哀傷的 XDD

不過我又想起了自己寫部落格的初衷,原本就不是要給誰誰誰看,也不是為了流量或是各種附加利益,畢竟我要賺錢我就轉行去寫美妝/3C/生活了好嗎😂,我之所以想寫這些東西,純粹是為了記錄,畢竟大腦容量有限,我所能做的就是利用紙筆、利用打字幫我記錄下來。如果哪天我忘記了,至少還有這些記錄可以翻閱。

這就是我的初衷,直到現在依然不變,所以轉而想想,也不用怕別人需不需要,不違本心而已 XDD

扯遠了,哈,總之有任何問題都歡迎一起交流討論,針對 gulp 有更好的寫法也歡迎告訴我喔!