Sass(Scss) Memo: 出力形式 compressed

Sassにはいくつかの出力形式がありますが、今回はcompressedについてです。
どのように出力されるのか見ていきます。

よくありそうなスタイルの記述

Scss
element+element {
    margin: 0.5em 0;
    padding: 0px;;;
    border: none;
    background-color: rgb(0,0,0);
    color: #ffffff; ;;

}
selector {
; // 空の宣言ブロック
}
CSS
element + element{margin:0.5em 0;padding:0px;border:none;background-color:black;color:#ffffff}
  • 余計な改行や空白は削除されます。
    例外として、セレクタの結合子(+ や >)の前後には空白が挿入されます。
  • 最後のプロパティのセミコロン(;)や余分なセミコロンが削除されます。
  • カラーコードは6桁のまま出力されます。3桁にはなりません。
    ただし、Mixinを通したものはどの出力形式でも条件によって出力される値が変わります。
  • rgbは可能なものはカラーコードに変換されます。
  • 0pxは0にはならず、そのまま0pxで出力されます。
  • noneは0にならず、そのままnoneで出力されます。
  • 0.5emは.5emにはならず、そのまま0.5emで出力されます。
  • 空の宣言ブロックは出力されません。

CSS/Sassコメント

Scss
selector-1 {
    margin: 0;
}
/*
 * 複数行CSSコメント
 * 複数行CSSコメント
 */
selector-2 {
    /* 1行CSSコメント */
    // Sassコメント
    padding: 0;
}
/*!
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */
selector-3 {
    /*! !付きの1行CSSコメント */
    color: red;
}
body /*! */ element {
    width: 100px;
}
CSS
selector-1{margin:0}selector-2{padding:0}/*
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */selector-3{/* !付きの1行CSSコメント */;color:red}body element{width:100px}
  • CSSコメントは削除されます(Sassコメントはどのコンパイル形式でも削除されます)。
  • 「/*!」から始まるCSSコメントはそのまま残ります。ただし、セレクタ部分に入れた場合は削除されます。

コメント(「/*!」から始めたコメントも)が削除されるので、次に挙げるハックは使用できません。

使用できないコメントを利用したハック

Scss
html[xmlns] > /**/body elements { property: value; }
html > /**/ body elements { property: value; }
/* \*//*/ selector { property: value; } /**/
/* \*/ selector { property: value; } /**/
など

コメントの削除には例外があります。プロパティの後ろにいれたコメントは削除されないので、次に挙げるハックは使用することができます。

使用できるコメントを利用したハック

Scss
selector {
    color/**/: red; // IE7,8,9と他のモダンブラウザ
    color/*\**/: green\9; // IE7,8,9
}
CSS
selector{color/**/:red;color/*\**/:green\9}

ほかのハックはどうでしょうか。気になりますね。。

IE6 スターハック

Scss
* html element { // IE6
    color: red;
}
CSS
* html element{color:red}

問題なし。

IE6 アンダースコアハック

Scss
selector {
    _color: red; // IE6
}
CSS
selector{_color:red}

問題なし。

IE7 スターハック

Scss
*:first-child + html element { // IE7
    color: red;
}
CSS
*:first-child + html element{color:red}

問題なし。

IE6,7 アスタリスクハック

Scss
selector {
    *color: red; // IE6,7
}
CSS
selector{*color:red}

問題なし。

IE6,7 スラッシュハック

Scss
selector {
    /color: red; // IE6,7
}

エラーになります。
変数を使いましょう。でも一番早いのは / の代わりに * を使うことです。

Scss
$slash: "/";

selector {
    #{$slash}color: red; // IE6,7
}
CSS
selector{/color:red}

これで問題なし。

IE \9ハック

Scss
selector {
    color: red\9; // IE6,7,8,9 (10も??)
}
CSS
selector{color:red\9}

問題なし。

IE \0/ハック

Scss
selector {
    font-family: Meiryo, sans-serif\0/; // IE6,7,8,9 (10も??)
}

エラーになります。
変数を使いましょう。

Scss
$hack-ie6to9: "\0/";

selector {
    font-family: Meiryo, sans-serif#{$hack-ie6to9}; // IE6,7,8,9 (10も??)
}
CSS
selector{font-family:Meiryo,sans-serif\0/}

これで問題なし。

セレクタハック 1

Scss
html > body element { // IE7と他のモダンブラウザ
    color: red;
}
CSS
html > body element{color:red}

問題なし。

セレクタハック 2

Scss
html + body element { // IE7と他のモダンブラウザ
    color: red;
}
CSS
html + body element{color:red}

問題なし。

Firefox moz-any-linkハック

Scss
element, x:-moz-any-link {
    color: red;
}
CSS
element,x:-moz-any-link{color:red}

問題なし。

WebKit mediaqueryハック

Scss
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    selector {
      color: red;
    }
}
CSS
@media screen and (-webkit-min-device-pixel-ratio: 0){selector{color:red}}

問題なし。

@importを使ったハック

もう使うことはなさそうですが、これらのハックも使用できません。

@import'style.css'; → @import url(style.css); に整形される。
@import style.css;  → エラーになる。
など

結論

いくつかのハックが使用できなくなりますが、それ以外は特に問題なさそうです。

ただ、GitやSVNなどのバージョン管理ツールでのCSSの差分確認は難しくなると思いますのでご注意を。