Sass(Scss) Memo: 出力形式 compressed
- Published:
Sassにはいくつかの出力形式がありますが、今回はcompressedについてです。
どのように出力されるのか見ていきます。
よくありそうなスタイルの記述
element+element {
margin: 0.5em 0;
padding: 0px;;;
border: none;
background-color: rgb(0,0,0);
color: #ffffff; ;;
}
selector {
; // 空の宣言ブロック
}
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コメント
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;
}
selector-1{margin:0}selector-2{padding:0}/*
* !付きの複数行CSSコメント
* !付きの複数行CSSコメント
*/selector-3{/* !付きの1行CSSコメント */;color:red}body element{width:100px}
- CSSコメントは削除されます（Sassコメントはどのコンパイル形式でも削除されます）。
- 「/*!」から始まるCSSコメントはそのまま残ります。ただし、セレクタ部分に入れた場合は削除されます。
コメント（「/*!」から始めたコメントも）が削除されるので、次に挙げるハックは使用できません。
使用できないコメントを利用したハック
html[xmlns] > /**/body elements { property: value; }
html > /**/ body elements { property: value; }
/* \*//*/ selector { property: value; } /**/
/* \*/ selector { property: value; } /**/
など
コメントの削除には例外があります。プロパティの後ろにいれたコメントは削除されないので、次に挙げるハックは使用することができます。
使用できるコメントを利用したハック
selector {
color/**/: red; // IE7,8,9と他のモダンブラウザ
color/*\**/: green\9; // IE7,8,9
}
selector{color/**/:red;color/*\**/:green\9}
ほかのハックはどうでしょうか。気になりますね。。
IE6 スターハック
* html element { // IE6
color: red;
}
* html element{color:red}
問題なし。
IE6 アンダースコアハック
selector {
_color: red; // IE6
}
selector{_color:red}
問題なし。
IE7 スターハック
*:first-child + html element { // IE7
color: red;
}
*:first-child + html element{color:red}
問題なし。
IE6,7 アスタリスクハック
selector {
*color: red; // IE6,7
}
selector{*color:red}
問題なし。
IE6,7 スラッシュハック
selector {
/color: red; // IE6,7
}
エラーになります。
変数を使いましょう。でも一番早いのは / の代わりに * を使うことです。
$slash: "/";
selector {
#{$slash}color: red; // IE6,7
}
selector{/color:red}
これで問題なし。
IE \9ハック
selector {
color: red\9; // IE6,7,8,9 (10も??)
}
selector{color:red\9}
問題なし。
IE \0/ハック
selector {
font-family: Meiryo, sans-serif\0/; // IE6,7,8,9 (10も??)
}
エラーになります。
変数を使いましょう。
$hack-ie6to9: "\0/";
selector {
font-family: Meiryo, sans-serif#{$hack-ie6to9}; // IE6,7,8,9 (10も??)
}
selector{font-family:Meiryo,sans-serif\0/}
これで問題なし。
セレクタハック 1
html > body element { // IE7と他のモダンブラウザ
color: red;
}
html > body element{color:red}
問題なし。
セレクタハック 2
html + body element { // IE7と他のモダンブラウザ
color: red;
}
html + body element{color:red}
問題なし。
Firefox moz-any-linkハック
element, x:-moz-any-link {
color: red;
}
element,x:-moz-any-link{color:red}
問題なし。
WebKit mediaqueryハック
@media screen and (-webkit-min-device-pixel-ratio: 0) {
selector {
color: red;
}
}
@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の差分確認は難しくなると思いますのでご注意を。