Sassで出力されるCSSの記述ルールを独自ルールに変更してみた
/ Category:Web / Tag:CSS, Ruby, Sass / No Comments
この記事は約3分で読めます。
TLで話題になっていたSassを導入してみましたのですが、CSSの記述ルールが4種類しかなく、俺俺ルールじゃないと気持ち悪かったので変更してみました。
-
2012年1月14日「Sass」の表記が「Saas」になっていたのを修正いたしました。
ご指摘ありがとうございます！
変更した点
- 1セレクタに1プロパティの場合は1ライン
- プロパティが複数ある場合のインデントはタブ区切り
対象ファイルと変更箇所
C:¥[Ruby]¥lib¥ruby¥gems¥1.9.1¥gems¥sass-3.1.12¥lib¥sass¥tree¥visitors¥to_css.rb
※上記の[Ruby]はRubyをインストールしたディレクトリにご変更ください。
//113行目を下記に変更 tab_str = ' ' * (@tabs + node.tabs)
//179行目に下記を追加
elsif node.style == :expanded
if node.children.size > 1
properties = with_tabs(@tabs + 1) {node.children.map {|a| visit(a)}.join("\n")}
end_props = "\n" + old_spaces
to_return << "#{total_rule} {\n#{properties}#{end_props}}#{"\n" if node.group_end}"
else
properties = node.children.map {|a| visit(a)}.join(' ')
to_return << "#{total_rule} { #{properties} }#{"\n" if node.group_end}"
end
変更前のスタイル
.basicTbl01 {
width: 100%;
}
.basicTbl01 table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
}
変更後のスタイル
.basicTbl01 { width: 100%; }
.basicTbl01 table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border-top: 1px solid #D4D4D4;
border-left: 1px solid #D4D4D4;
}
Sass導入～変更の参考にさせていただきました。
この場を借りて御礼申し上げます。
レスポンス（Twitter）
コメント（Facebook）
トラックバック
トラックバックURL：
トラックバックはまだありません。