Compassで書き出すCSSファイルを軽量化する
Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現
【Sassで解決】CSSの@importはどれだけ悪影響なのか自分で試してみる | DevelopersIO
はじめに Webサイトの高速化について調べてみるとCSSの@import url();は使わない方が良いという指摘をよく見かけます。 問題となるのはパラレルロード（複数のリソースを同時にロードする）ができなくなる場合があることと、CSSの読み込み順序が変わってしまうことがあるようです。 実際にどれだけ読み込み速度に問題があるのか、3つの読み込み方で試してみたいと思います。 比較する3つの読み込み方 今回はこの3つで読み込みを比較してみます。 CSSの@import url();で読み込む HTMLのlink要素で別々に読み込む Sassで@importして1つにまとめてlink要素で読み込む 対象ブラウザ 今回の検証ブラウザはChromeとInternet Explorerです。 どちらも備え付けの開発者ツールで検証します。 今回計測したサンプル サンプルはこちらに公開しているので問題があ
Sassでcssの記述を圧縮 compressed |
Sass便利！ということでちょこちょこと勉強しています。 cssファイルを改行やスペースを削除して圧縮したいというときにはcompressedを使います。 圧縮させるファイル：style.scss Sassコマンド入力後生成されるファイル：style.css ターミナルを起動して、cdコマンドでstyle.scssファイルがある場所へ移動する。 移動後、 sass --style compressed style.scss:style.css と、コマンドを入力すれば圧縮された（minify化した）style.cssが生成されます。 パフォーマンス的にも良くなるってことでSass良いですね。 参考サイト： Windows PC に Ruby と Sass を導入する方法
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
