【Sass】フレームワークについて

Sassフレームワークとは？

レイアウトやパーツなどCSSでよく使われるパーツをまとめたものになります。Sassのmixin集です。

種類

機能拡張系フレームワーク

Bourbon

Sassのミックスイン集、CSSフレームワークの中ではBootstrapについで有名なフレームワークかもしれません。

ANIMATE.SCSS

アニメーションを簡単に実装することができるミックスイン集です。

Sass MediaQueries

メディアクエリーのミックスイン集になっています。引数で簡単にブレークポイントを指定できたり、デバイス名（iPhoneXなど）でメディアクエリーを指定できたりします。

compass-mixins

元々、compassというRubyベースのフレームワークがありました。Sassが流行り始めた頃は非常にこれが流行っていました。ただ、現在は開発が終了していたりRubyベースということもあってあまりお勧めはできないフレームワークです。

パーツ系フレームワーク

ボタンやフォームなどのパーツ集

Ukit

軽量でReactやVueなどとも相性が良いです。

BUTTONS

文字通りボタンのスタイルに特化したフレームワークです。色や形だけでなく、3Dなど様々なスタイルのボタンが存在します。

レイアウト系フレームワーク

グリッド、レスポンシブに対応していたりします。

Neat

Bourbonが開発しているフレームワークでもあります。

Susy

Sassの公式サイトでも採用されている軽量、柔軟なフレームワークです。

総合フレームワーク

全部入りのフレームワークです。

Bootstrap

CSSフレームワークとしては一番有名です。

Foundation

レスポンシブに特化したフレームワークです。こちらも人気があります。

Materialize

Googleが提唱したマテリアルデザインに特化したフレームワークです。スマホのネイティブアプリなどを作る場合にも役立つフレームワークです。CSSだけでなくJavaScriptのライブラリも充実しています。

Pure

yahooが開発、提供しているフレームワークです。軽量で必要最低限の機能を備えていることです。モジュールごとに分割して読み込むことも可能です。（ボタン部品だけなど）

Semantic UI

セマンティックであることに重点をおいたフレームワークです。つまり直感的にフレームワークを使えるというようなニュアンスになります。導入コストが低いのがメリットになっています。デザインもコンポーネントも豊富に用意されていてカスタマイズもしやすいです。