CSSハックを!importantすると圧縮時にプロパティが消える

消えるpadding

さて、このような記述をしているSCSSがあったとします。

test.scss

#test1 {
  padding: 5px;
  padding-right: 2em;
  padding: 5px\9 !important;
}

そもそも、なんでpaddingをいくつも指定してるんだよ…というツッコミは置いておいて、、、

このSCSSファイルをgulpでコンパイル・圧縮するとどのようなCSSが生成されるでしょうか。実行環境はこちらです。

Sass 3.4.13 (Selective Steve)
gulp CLI version 3.9.0
gulp-cssmin 0.1.7

わたしの予想では、

test.css

#test1 {
  padding: 5px 2em 5px 5px;
  padding: 5px\9 !important;
}

となるのではないかと思ったのですが、実際に生成されたCSSは以下のような記述になっていました。

test.css

#test1 {
   padding-right: 2em;
   padding: 5px\9!important
}

あれ？？padding:5px;が消えてる…？
でもデザインはSCSSファイルに記述されている通りpadding:5px;がないと崩れてしまいます…。これは困った。。。

CSSハック

さて、#test1のスタイルには、見慣れない設定があります。

padding: 5px\9

そもそもこれは何をしたいんじゃ…と思った方は、以下のリンク先を読んでみてください。

Web制作者のためのSassの教科書
コーダー必見、SCSS・Compassで開発効率アップ|SCSS対応IE向けCSSハック編

つまりは、IE9以下のみ適用されるCSSハックなんです。実はSCSSでも使うことができる。

#test1 に適用させたいスタイルを解釈すると

• 9以下のIE以外には padding: 5px 2em 5px 5px;
• IE9以下にはpadding:5px;

ということになります。

SassのプリプロセッサはこのCSSハックを解釈できるようで、Sassでコンパイルしただけのgulpタスクを通すと、予想と同じCSSが生成されました。それがこちら。

test.css

#test1 {
  padding: 5px;
  padding-right: 2em;
  padding: 5px\9 !important;
}

お！ padding: 5px;がいるじゃありませんか！

!importantとcssmin

Sassコンパイル時には問題ない…ということで、paddingが消えてしまう原因は圧縮時にありました。
CSS圧縮プラグインのgulp-cssminがCSSハックを解釈できないのか、!importantの解釈にクセがあるのかはわかりませんが、CSSハックの!importantを外すことで、予想通りのCSSが生成されました。

test.scss

#test1 {
  padding: 5px;
  padding-right: 2em;
  padding: 5px\9;
}

test.css

#test1{
  padding:5px 2em 5px 5px;
  padding:5px\9;
}

ということで、CSSハックに!importantを使うときは要注意。そもそも、なるべく!importantやCSSハックをしない方向でスタイルを決めていきたいところです。