昨天閱讀 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，以 SCSS 為例，我們會寫：

@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 指令即可：

# 將 input.css 編譯成 output.css
$ myth 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 有更好的寫法也歡迎告訴我喔！