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導入~変更の参考にさせていただきました。
- コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 - YATのBlog
- 【Sassを覚えよう!Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する - CSS HappyLife
- Sassで出力するCSSファイルを自社のCSS記述ルールに合わせるヒント|Blog|Skyward Design
この場を借りて御礼申し上げます。