Sassの@extendを活用してFactoryパターンを実装する

Sassの@extendを活用してFactoryパターンを実装する

皆さんこんにちは。

cssをより効率的に書くためにSassSCSSを使っている方は多いかと思います。

実は、@extendプレースホルダセレクタを活用することで保守性を大きく上げることができます。

@extendやプレースホルダセレクタは、何となく聞いたことあるけど、いまいち使いどころが無い・・・

と思っているあなたに向けて、メリットを説明していきますね。

ボタンのスタイルを効率的に管理するために

ボタンのスタイルを例に挙げ、効率的なコードについて考察します。

改善前のボタンのSCSS

「色だけ異なるボタン」や「このボタンだけ角丸する」といったとき、普通に何も考えずにスタイルを書くと、

これは極端な例ですが、このように、長いコードになってしまい、「どこが共通化できる部分で、どこが異なる部分か」がとても分かりづらいですよね。

改善後のボタンのSCSS

そこで、共通化できる部分と異なる部分を分離して、保守性を上げてみましょう。

まずは、プレースホルダセレクタを定義します。

下記の例でいう、%abstract_button の部分で、このように%をつけることで、直接cssにコンパイルされなくなります。 もし、% を付けずに、.abstract_button とすると、ボタンを生成するたびに呼び出されるので、余計なcssコードがコンパイルされてしまいます。 

そのようなことを防ぐため、抽象クラスはプレースホルダセレクタを用いて定義するようにします。

次に、サブクラスです。

引数に変更の多い部分(幅や高さ、色、フォントサイズなど)を取り、より具体的なボタンを生成するメソッドです。

そして、サブクラスを include することで、実際にオブジェクトを生成しています。

出力結果のcssは下記のようになっています。

後々ボタンのスタイルが変更になった場合は生成メソッドの引数を変更するだけで済みますし、仕様が変わった場合もサブクラスを編集すればよいので、保守性が高まります。

今回の例は、「ボタンの製品・生成する工場・生成する処理」に分かれていますので、平たく言えばFactoryパターンに当てはまるかと思います。なのでタイトルもFactoryパターンと表現してます。

最後に

理解できましたでしょうか?

今回のように、クラスを分離させてスタイルを書くことで、変更が容易になります。

プログラミングだけでなく、今回のようなSCSSコーディングでも、ぜひ変わる部分・変わらない部分を意識してみてはどうでしょう。


Previous: デザイナーから見た、ユーザーをぐっと惹きつけるコピーライティング Next: bitbucketのWebフック(第2回)

© 2017 ALL CONNECT Inc. All Rights Reserved.