超お手軽CSSプリプロセッサMythを使ってみよう

Myth

googleで検索してみたけど、あんまり人気ないんですかねMythって。正直いうと僕もついこないだまで知らなかったんですけど、新しい現場に移ったんですが、そこで使っていたんですよね。なので勉強がてら記事にしようかと思います。とはいっても学習コストがとても低いプリプロセッサなのでチュートリアルではなく紹介です。

Ads

Myth

Myth

新しい現場に移って早1ヶ月経ちました。少しづつ環境の変化にも慣れてきたので、記事をもっと書いていこうかなと思います。で、今回はMythについてです。CSSプリプロセッサといえば、sass、Lessが有名どこですよね。

うちの現場ではMythを使っています。Googleで調べてみてもあまり日本語の記事が見当たらないんですね。というのも、お手軽っていうのが理由なのかも。覚えることが少ないので学習コストがかからないんですよね。ここが一番の魅力なんじゃないかなと思います。

僕も新しい現場ではじめてMythを知ったんですけど、覚えることが少ないのですごく助かりました。なので、チュートリアルとしての記事というよりかはこんなプリプロセッサもあるよという紹介の記事です。

Mythのインストール方法

1.Mythをインストールする

npm install -g myth

Macの場合は頭にsudoつけてくださいね。

2.cssファイルを作る
ここではinput.cssにします。正直なんでも大丈夫です。拡張子も.cssです。

3.コンパイルする

myth input.css output.css

output.cssが生成されるはずです。

Mythのいいところ

変数が使える
計算ができる
色の計算
ベンダープレフィックスを自動でつけてくれる

基本的に必要最低限のもののみ使うことができるcssプリプロセッサっていう感じです。sassとかだと機能が多すぎる部分もあるしcompassも使い始めたらめっちゃ重いし。手軽に使える、学習コストが低いっていう点でMythを選択するのはいいと思います。

gulp.jsでコンパイルも自動化できそうです。興味のあるかたは試してみてください。
gulp-myth-css

いいなと思ったらシェアお願いします

同じタグで検索

Ads

同じカテゴリーの記事

ページの先頭へ