技術/HTML/CSS記述のためのフレームワークの比較参考URLメモ1(Sass, Less, Stylus, 2015-03時点)

• [ Prev ]
• [ Next ]
• [ 技術 ]

GruntとかGulpの記事漁ってたら、皆してsass/less/stylus使いまくってて、今更ながら何がどう違うのか2015-03時点でググったメモ。

いずれもCSS記述を効率化するための独自言語、記法を定め、静的 or 動的にCSSに変換している点は共通。

あってるか分からないけど、三行でまとめ：

• Less : node.jsで動くコマンドラインツールだけど、ブラウザ上で実行時に動的に処理することもできる。
• Sass : rubyで動くコマンドラインツールでCSSに変換する。条件分岐や繰り返しなどよりプログラミング的な処理を埋め込むことが出来る。compassというSass用のCSS生成フレームワークがある。
• Stylus : 一番後発でLessとSassの良いとこどり。node.jsで動くコマンドラインツールで、かなり簡潔な書き方ができる。

各公式サイト：

• Getting started | Less.js
  • http://lesscss.org/
• Sass: Syntactically Awesome Style Sheets
  • http://sass-lang.com/
• Stylus — expressive, robust, feature-rich CSS preprocessor
  • http://learnboost.github.io/stylus/

SassとLessの比較：

• CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
  • http://dxd8.com/archives/217/
• SCSS(Sass)とLESSの比較とその結果 | コラム | Web制作 株式会社ワンゴジュウゴ WAN55 （東京・千代田区）
  • http://www.wan55.jp/column/detail/id=179
• CSSメタ言語のSass ScssとLessを比較しました - Qiita
  • http://qiita.com/pugiemonn/items/4a95f0f2b5594ccba217

Stylusの入門とSass/Lessとの比較：

• CSS - Stylus入門したときのまとめ - Qiita
  • http://qiita.com/morishitter/items/b9a2d78c79c3c07de776
• Sass と LESS 以外の選択肢 Stylus
  • http://kyosuke.tumblr.com/post/14003234226/stylus

• [ Prev ]
• [ Next ]
• [ 技術 ]