Sassでスタイルシート（css）を圧縮してコンパイルする方法

Sassを書籍で学びたい方や初学者の方におすすめな書籍です。
Sassの概要や文法はもちろん、導入方法やフレームワーク、筆者が実際に仕事の現場で使用している実践的なテクニックまで幅広く紹介されています。
実際、初学時にかなりお世話になった書籍です。一緒に勉強しませんか？

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ Web制作者のための教科書シリーズ

¥2,138 （2022/06/04 15:36時点 | Amazon調べ）

Amazonで見る

Kindleで見る

ポチップ

実行環境

実行環境がない方は、こちらの記事を参考にしてください。

Sassでスタイルシートを圧縮してコンパイルする

今回は、Sassでスタイルシートを圧縮してコンパイルする方法をご紹介します。

通常、スタイルシートは圧縮して軽量化することで、表示速度の短縮やサーバ容量の節約につながります。
圧縮すると可読性は落ちてしまうのですが、それでもやっておくに越したことはありません。

Sassでコンパイルを行う際に、同時に圧縮できれば便利だなと感じたことはありませんか？
今回はSassでスタイルシートを圧縮してコンパイルする方法をご紹介するので、ぜひ参考にしてください。

コンパイル時に “–style compressed” を引数として指定する">コンパイル時に “–style compressed” を引数として指定する

Sassでスタイルシートを圧縮してコンパイルするには、コンパイル時に “–style compressed” を引数として指定します。

sass styles.scss:styles.css --style compressed

また、ソースマップを作成せずにスタイルシートを圧縮してコンパイルしたい場合は、次のように指定します。

sass styles.scss:styles.css --no-source-map --style compressed

ソースマップを作成せずにスタイルシートをコンパイルする方法については、こちらの記事を参考にしてください。

どのくらい圧縮されるか

実際にどのくらい圧縮されるか気になったので、手元にあるファイルで試してみました。

結果は、以下のとおりです。
2KBほど圧縮されていることが分かりました。

お疲れさまでした

Sassでスタイルシートを圧縮してコンパイルする方法をご紹介しました。
少しでも参考になれば幸いです。