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

goto_jp 229views 更新:2014年4月2日

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」と変えるだけで従来のスタイルと差し替えができます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません