Sassの--watchオプションと自動minifyについて
2024-10-16
SassはCSSの拡張言語で、より柔軟で強力なスタイルシートを作成することができます。その中でも、--watchオプションは、Sassファイルの変更を監視し、自動的にコンパイルしてくれる便利な機能です。
minifyとは、CSSファイルのサイズを縮小する処理のことです。不要な空白やコメントを削除することで、ファイルサイズを小さくし、ページの読み込み速度を向上させることができます。
sass --watch with automatic minifyとは、Sassファイルの変更を監視し、自動的にコンパイルしてminifyされたCSSファイルを出力する設定を指します。
具体的なコマンド例:
sass --watch style.scss --output-style compressed style.min.css
このコマンドでは、style.scssというSassファイルを監視し、変更があるたびにコンパイルして、style.min.cssというファイルにminifyされたCSSを出力します。
Sassファイルの作成
まず、Sassファイルを作成します。例えば、style.scssという名前で作成します。
// style.scss
$primary-color: #007bff;
.button {
background-color: $primary-color;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}
Sassのインストール
ターミナルまたはコマンドプロンプトで、Sassをインストールします。
npm install -g sass
--watchオプションを使用したコンパイルとminify
以下のコマンドを実行します。
sass --watch style.scss --output-style compressed style.min.css
このコマンドにより、style.scssファイルを監視し、変更があるたびにコンパイルして、minifyされたCSSファイルであるstyle.min.cssを出力します。
ブラウザで確認
style.min.cssをHTMLファイルにリンクし、ブラウザで確認します。minifyされたCSSが適用されていることを確認できます。
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" href="style.min.css">
</head>
<body>
<button>Click me</button>
</body>
</html>
Sassファイルの変更と自動コンパイル
style.scssファイルを編集し、保存します。変更が自動的にコンパイルされ、minifyされたCSSファイルが更新されます。
説明
style.min.css: 出力するファイルの名前を指定します。--output-style compressed: 出力するCSSのスタイルを圧縮された形式にします。sass --watch style.scss:style.scssファイルを監視します。
タスクランナーの使用
css sass minify
