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

これからSassを学んでみたい!という方にぴったりな本です。
Sassの概要や文法はもちろん、導入方法やフレームワークまで幅広く紹介されています。
中でも、現場で使える実践テクニックは必見です!
ぜひ一度手に取ってみてください。
当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか?
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく!
OS | macOS Big Sur 11.6.6 |
Sass | 1.34.0 |
開発および実行環境がない方は、以下の記事を参考に構築してください。
今回は、Sassでスタイルシートを圧縮してコンパイルする方法をご紹介します。
通常、スタイルシートは圧縮して軽量化することで、表示速度の短縮やサーバ容量の節約につながります。
圧縮すると可読性は落ちてしまうのですが、それでもやっておくに越したことはありません。
Sassでコンパイルを行う際に、同時に圧縮できれば便利だなと感じたことはありませんか?
今回はSassでスタイルシートを圧縮してコンパイルする方法をご紹介するので、ぜひ参考にしてください。
Sassでスタイルシートを圧縮してコンパイルするには、コンパイル時に “–style compressed” を引数として指定します。
sass styles.scss:styles.css --style compressed
また、ソースマップを作成せずにスタイルシートを圧縮してコンパイルしたい場合は、次のように指定します。
sass styles.scss:styles.css --no-source-map --style compressed
ソースマップを作成せずにスタイルシートをコンパイルする方法については、次の記事を参考にしてください。
実際にどのくらい圧縮されるか気になったので、手元にあるファイルで試してみました。
結果は、以下のとおりです。
2KBほど圧縮されていることが分かりました。
圧縮なし | 圧縮あり |
13,742 バイト | 11,412 バイト |
Sassでスタイルシートを圧縮してコンパイルする方法をご紹介しました。
少しでも参考になれば幸いです。
現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください!