【こんなにも効率がいいなんて…】SassでCSSフレームワークを作成して能率を上げる方法

ここ数年、CSSフレームワークの話題は最も盛り上がるトピックのひとつとなっています。

フロントエンド作成のベテランにはお馴染みの話題でしょうが、それでも、プロジェクトごとに新しくスタイルの基礎部分を作り直すのが面倒なのは確かでしょう。

 

しかし、Sassを利用すれば、この作業をもっと簡単にできるのです。

 

 

 

 

 

CSSグリッドフレームワークを使う理由は？

CSSフレームワークを利用することで、フロントエンドの開発者やデザイナーは最小限の時間でサイトを作成することができます。

何度もテストを重ねたコードベース上に構築するためバグの心配も少なくなります。

 

開発者とデザイナー双方に大きなメリットをもたらしてくれるのがフレームワークなのです。

 

 

 

Sassの大きな利点

Sassでは変数やmixin、ネスト化されたセレクターや継承にいつでもアクセスすることができます。これは素のCSSでは決して得られない大きな特徴です。

 

例えば、同時に5つのサイトデザインと作成を任されていたとしましょう。そのどれもが微妙に異なるグリッド寸法をしています。

電卓でいくつもの計算を重ねるかわりに、必要な計算を行ってくれるコアロジックを作成してみましょう。ロジックを作成した後はスキンごとにクラス名を入れ替えて実行するだけで全ての計算が行われ、新たなグリッドレイアウトに更新されます。まるで魔法のようですよ！

 
 
 

 
 

注意した方がいいことも

 

 
 

 
 
もちろん、一度作ったロジックを永遠に使い続けられるわけではありません。

新しいプロジェクトに取りかかるたびに新しいチャレンジが待っています。時代の流れに応じてコア部分のコードを改善することも必要です。

SassにおいてはよくCSSの肥大化が問題として上げられます。様々なケース全てに対応しようとする結果このようなことが発生してしまうのですが、ブール機能を活用することでフレームワークの機能のオンオフを切り替えることもできます。これならすっきりしたCSSができますね。

 

 

 

 

 

このように、Sassを利用したフレームワークには欠点がないわけではありません。しかしそれを解決する機能もしっかりと用意されているのです。

Sassでのフレームワーク作成は全く新しい常識です。カスタマイズ性と柔軟性を飛躍的に向上させる新たな常識を、ぜひ取り入れてください。

 

 

 

 

 

※本稿は「Building a CSS framework with Sass」を翻訳・再編集したものです。