Dart Sass
インストール
brew install sass/sass/sass
バージョン確認
sass --version
1.50.0
Sassの詳細
sass --version
sass/sass/sass: stable 1.50.0
Stylesheet Preprocessor
https://sass-lang.com
/usr/local/Cellar/sass/1.50.0 (7 files, 8.5MB) *
Built from source on 2022-04-14 at 10:58:53
From: https://github.com/sass/homebrew-sass/blob/HEAD/sass.rb
==> Dependencies
Build: dart-lang/dart/dart ✔
フォルダ構成
folder
├-css
│ └─style.scss
└-index.html
<!DOCTYPE html>
<html lang="ja">
<head>
中略
<link rel="stylesheet" href="css/style.css">
<title>Document</title>
</head>
<body>
<h1>Dart Sass Test</h1>
<p>sample text</p>
</body>
</html>
$theme_color: green;
h1, p {
color: $theme_color;
}
CSSのディレクトリで以下のコマンドを実行
sass style.scss style.css
style.cssとstyle.css.mapが生成される
folder
├-css
│ ├-style.css
│ ├-style.css.map
│ └─style.scss
└-index.html
参照サイト
Sass のインストールと設定（Dart Sass）
スーパリロードなしでもCSSや画像の更新する方法
?v=任意の文字列(日付とか)をファイル名の後ろに追記
?v=20220727
使用例：
<img src="img/book02.jpg?v=20220727">