こんにちは、長友です。
前回、MagentoでこんなところでSassを使うと効率よく作業できるポイントとして入れ子についてご紹介しましたが、今回は変数についてご紹介します。
Sassの変数
SassではPHPなどのプログラムのように変数を使うことができます。
CSSでスタイルを書いていると、フォントカラーやリンクカラーのように度々使用する色などがあります。
そういう重複するスタイルに変数を上手に取り入れることで、例えば構築中に色が変更になった場合などに修正の影響範囲を抑えることができます。
変数の記述例を見てみましょう。
変数の定義例
変数の使用例
変数は「$変数名」の形式で定義します。必要なところで「color: #333;」の代わりに「color: $txt_color_base;」と変数を指定して使用します。
Magentoでは商品画面以外でも、カートのなか、マイアカウントの中などで商品名にリンクが入っています。
通常のリンクと商品名のリンク色を分けたいという時に使用例のように使い分けることができます。
フォントカラーやリンクカラーはスタイルの色々なところで指定します。
何度も使用するスタイルを変数として定義しておくことで記述する時に色を探したり覚えておく必要がなくなりますし、値を間違えるということも減るのではないでしょうか。
より使いやすくするために、変数はファイルの上部にまとめて記述しておくとメンテナンス性も向上すると思いますし、変数名はルールを決めて覚えやすいものを定義しておくといいですね。