CSSをSCSS形式で書き直してみた : SimpleIsm

崇拝するhail2u.netを~~クソパクりまくって~~リスペクトして、CSSをいくつかのモジュールに分けて、SCSS(Sassy CSS)形式で書き直してみた。そしてそれをGitHubで公開してみた。

CSSを各モジュールに分けて、SCSS形式で書き直して、@mixinをちょこっと使っているぐらいなので、本当の意味でのSCSSの恩恵はまだ受けられていないような気がする。と言うか前より見難くなったような…書き方の問題？慣れてくれば見やすくなってくるのかなー。

とりあえずの変化としては、compressedで書き出すようにしているので、ファイルサイズが35.605KBから29.926KBまで縮められたことかな。無駄な記述が多いのは自覚しているので、SCSS形式にしたことで、その問題が分かりやすくなって(現に書き直してる途中で「ここまとめられんじゃね？」ってところがいくつかあった)、効率的な書き方ができるようになると思う。25KBぐらいまでは縮めたい。

SassとかSCSSについて調べていたときのメモ

自動書き出し

$sass --watch hoge.scss:hoge.css

Windowsだったので、コマンドプロンプトでの操作。

通常のCSSのような表示で自動書き出し

$sass --style expanded --watch hoge.scss:hoge.css

圧縮して自動書き出し

$sass --style compressed --watch hoge.scss:hoge.css

Sassでの@charsetの扱い

@charsetで指定された文字コードに従って出力を変換する

ASCII文字しかなかった場合は@charsetがどのような値でも出力から削除される

ので、多くの場合@charsetを書いていても出力から消える。

Sassでの@charset – おれここめもかきなぐるおまえここよむなぐる – subtech

contentプロパティやコメントなどで日本語が含まれている場合以外(半角英数字だけの場合)は、@charsetは削除されるらしい。

SCSSでの隣接セレクタの書き方

以下通常のCSS。

#hoge h1 {
    color: black;
}

#hoge h1 + p {
    color: red;
}

これをSCSS形式で書きたいとき。2パターンある。

#hoge {
    h1 {
        color: black;
    }
    h1 + p {
        color: red;
    }
}

#hoge {
    h1 {
        color: black;
        & + p {
            color: red;
        }
    }
}

お世話になったサイト

まとめ

SassもといSCSS面白い！

これをSublime Textで書き出しとかを調整できたらさらに楽しくなりそう。あとはWeb上じゃなく、コマンドだけでGitHubにコミットできるようになればいいな。これは単にやり方を知らないだけなんだけど。