SASSが3倍効率良く書けるフレームワーク、ミックスインまとめ

Pocket

現在のWeb制作ではBootstrapのようなCSSフレームワークやSASS、LESSなどのCSSを効率良く各手法がよく使われます。SASSと一緒に使われるものとしてはcompassがよくあげられますが、実はこれ以外にも便利なMixin集やフレームワークがたくさんあります。

このページではThe Ultimate SASS Resources & Toolsで紹介されている多数のフレームワークの中からとくにおすすめできそうなものを紹介していきます。

SASSを効率良くするフレームワーク&ミックスイン集

Bootstrap Sass
まずはこちら、BootstrapのSASS版。BootstrapはLESSで提供されていましたが、SASS版も出ています。BootstrapのコンポーネントをSASSでカスタマイズできるので便利。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-01

Foundation
こちらはBootstrapに並んでよく使用されているCSSフレームワーク。最新版のFoundation5ではさらに多くのコンポーネントに対応しています。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-03

Titon Toolkit
最近注目されているのがこちらのToolkit。モバイルアプリにも使える最新のコンポーネントが用意されており、非常に使いやすいCSSフレームワークです。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-10

Bourbon Neat
こちらはレスポンシブなグリッドレイアウトを作るためのフレームワーク。Bootstrapはjavascriptやらコンポーネントなどがあって結構複雑でしたが、
こちらはグリッドを作るためのシンプルで軽量なフレームワークになっています。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-02

MUELLER GRID SYSTEM
こちらもグリッドシステムを提供するフレームワークです。レスポンシブにも非レスポンシブにも対応しているため、PC画面だけを効率良くつくりたいという場合におすすめです。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-04

CodeKit
こちらはSASSをコンパイルするためのツール。コンパイルといえばターミナルやGruntがありますが、黒い画面よくわからん!という人でも安心の高品質なツールです。
ちなみに、黒い画面嫌いな僕はこれを愛用してます。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-05

Scout
先ほどのCodeKitと同じく、こちらもコンパイラー。こちらは無料ツールです。コンパイラーとしての機能は同じなので問題なく使用できます。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-06

Bourbon
BourbonはSASSを使う際にあると便利なMixin集。グラデーションや角丸などCSSで書くにはちょっとめんどくさいものでも、たった1行で効率良く記述できるようになります。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-07

Sass MediaQueries
こちらはメディアクエリを効率良く書くためのMixin集。以外と書くのが大変なメディアクエリも、iphone6などのような分かりやすい単語1つで自動的に最適なサイズをセットしてくれます。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-08

Sassy Starter
こちらは最近流行のSMACSSの概念に基づいたファイル構造を用意してくれるスターターキット。最適なスタイル構造に従ってスタイルできるので大規模サイトにもおすすめ。
SASSを効率良くするフレームワーク&ミックスイン集まとめ-09

続きはこちら:The Ultimate SASS Resources & Tools

SASSでCSSスタイリングを効率化しよう!

ここまでSASSの便利なフレームワークなどを紹介しましたが、SASSは非常に便利なスタイルの書き方です。まだSASSを導入されていない方は是非このパワーを体験して下さい!

そのためのスキルアップにおすすめできるのがこちらの書籍。SASSの開発者自身が著した非常にわかりやすい入門書となっています。