Sassを使ってCSSクラスをバージョン分けする

HTMLには手を入れずCSSだけでデザイン変更を行う場合、対象のCSSクラスを編集することになりますが、Sassで記述することで作業効率が上がるのでその方法を紹介します。

たとえば既存のCSSを下記とします。

.navigation {
　　～
}
.navigation a {
　　～
}
.navigation ul {
　　～
}

こちらをSassにネスト化すると下記になります。

.navigation {
　　～
　　a {
　　　　～
　　}
　　ul {
　　　　～
　　}
}

この「navigation」のデザインリニューアルを行う場合、下記のように「_v2」と付けたスタイルを別途作成します。

.navigation_v2 {
　　～
　　a {
　　　　～
　　}
　　ul {
　　　　～
　　}
}

元の記述を丸々コピーして親クラスに「_v2」を加えるだけです。

通常のCSSのままでもコピペで記述はできますが、全て「.navigation_v2」と書き換える必要があるので手間がかかりますね。こうして楽に書くことができるのがSassの一番のメリットです。　あとはHTML側のクラス指定を「navigation_v2」と変えるだけで従来のスタイルと差し替えができます。