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

2022/06/07Sass

当サイトはアフィリエイト広告を利用しています。

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか？
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく！

CodeCamp

実行環境

OS	macOS Big Sur 11.6.6
Sass	1.34.0

開発および実行環境がない方は、以下の記事を参考に構築してください。

Sassを導入してSCSSファイルからCSSファイルをコンパイルする方法

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

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

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

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

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

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

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

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

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

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

Sassでソースマップ（map）を作成せずにコンパイルする方法

どのくらい圧縮されるか

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

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

圧縮なし	圧縮あり
13,742 バイト	11,412 バイト

お疲れさまでした

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

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！

目次