こんにちは、長友です。
今日はMagentoでこんなところでSassを使うと効率よく作業できますというポイントをご紹介します。
MagentoのCSSの特徴
MagentoのCSSは汎用性のある設計がされており、同じクラスを複数のページで使用しています。
一つのクラスを複数ページで使用できるのは便利な反面、ここだけ色やサイズを変えたいという場合に小回りが利かない不便さがあります。
そういう時は、CSSの継承を使うなどして変更したい場所のクラスに合わせてCSSを追加していくことになります。
その場合、基本は同じだけど色やサイズが違うバージョンのCSSがどんどん増えていき、記述量が増えていってしまいます。
Sassでは、CSSの記載を入れ子状（ネスト）にして記載することができるため、そのような問題を回避することができます。
Sassを入れ子にした例を見てみましょう。
Sassを使わない例
Sassを使った例
Sassを使わない例では、pとaの指定をするためにbody .mainをコピー&ペーストする必要がありますが、Sassを使い入れ子にすることでコピー&ペーストから解放されるメリットがあります。
メリットはそれだけではなく、例えば.mainが.mainContentに変更になった場合に変更箇所が一箇所で済みます。
Sassは記述が簡潔になるだけではなく、メンテナンス性も向上するのではないでしょうか。
次回は変数について書いていきたいと思います。