フレームワークとは枠組み、構造、骨組みなどの意味で、プログラミングでよく使われる汎用的な機能、構成のまとまり。
Sassにも多数のフレームワークが存在しており大変便利だが、フレームワークに頼りすぎるとユニークなデザインやレイアウトが犠牲になってしまうのでご利用は計画的に。
Sassのフレームワーク
一般的なフレームワークといえば、SassやLESSなどのCSSを効率良く書くものや、BootstrapのようなCSSデザインフレームワークが有名ですね。
ひと昔前、Sassのフレームワークといえばcompassがよくあげられていましたが、Ruby Sassよりも高速なC/C++製 LibSassの登場に伴いCompassの利用者は一気に減少。2016年、「今後メンテナンスしない」と発表されました。
ソフトウェアフレームワーク（英: software framework）とは、プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。単にフレームワークとも呼ばれる。
引用：wikipedia
Sassフレームワーク導入のメリット
- 生産効率がいい
- 実装ルール、デザインを統一しやすい
- デザイン知識がなくとも「それなり」のものが作れる
Sassフレームワーク導入のデメリット
- 学習コスト（使い方を覚える時間）
- 古いブラウザに対応していない場合もある
- ユニークなデザインに対応できない場合がある
フレームワークの種類
機能拡張系、パーツ系を含むオールインワンのフレームワークから、パーツ系などに特化したフレームワークがあるので、フレームワークにお任せしたい分野を決めて、用途に応じて適宜導入すると良いでしょう。
総合フレームワーク
オールインワンの総合フレームワーク。これさえ入れておけばデザインからCSSコードの出力全てお任せ？
Boostrap
一番のメジャーどころ。ドキュメントも重質している。デザインテンプレートも充実しているフレームワーク。
https://getbootstrap.com
Foundation
モバイルファーストに特化した、レスポンシブに強いフレームワーク。ウェブサイト用とHTMLメール用の2種類が用意されている。
https://foundation.zurb.com
Materialize
Googleが提唱したマテリアルデザインに特化したフレームワーク。
http://materializecss.com
PURE
Yahoo!が開発・提供しているフレームワーク。必要最低限の機能を備えている。
https://purecss.io
Semantic UI
直感的にUIを使える設計になっていてカスタマイズもしやすい。
https://semantic-ui.com
機能拡張系フレームワーク
Sassミックスイン集。数年前まではCompassにお任せしていた分野。アップデートが続いているのでCompassより優秀。
Bourbon
数年前まではCompassかBourbonの2択と言われていた機能拡張系フレームワーク 。GUIツールも多くが対応している。
https://www.bourbon.io
Animate.scss
CSSによるアニメーションを簡単に実装することができるフレームワーク。
http://geoffgraham.me/animate-scss/
Sass MediaQueries
メディアクエリーのミックスイン集。
https://github.com/rafalbromirski/sass-mediaqueries
パーツ系フレームワーク
パーツに特化したフレームワーク。ボタンやフォームなどのパーツのスタイリングに特化している。
UIKit
安定した（よく見る）ユーザインターフェイスを使いたいならこれ。
https://getuikit.com
BUTTONS
ボタンに特化したパーツ系フレームワーク。
http://unicorn-ui.com/buttons/
レイアウト系フレームワーク
グリッド、レスポンシブデザインを簡単に導入できるフレームワーク。
Neat
Bourbonシリーズのフレームワーク。ドキュメントが丁寧でレイアウト系フレームワーク入門には最適か。
https://neat.bourbon.io
Susy
Sassの公式サイトでも採用されているフレームワーク。とにかく軽いと言われている。
http://oddbird.net/susy/
コメントを残す