Web Design Leaves

$ sass --version return
//インストールしたバージョンが表示される
1.43.5 

$ brew info sass return
//パッケージの詳細が表示される
sass/sass/sass: stable 1.43.5
Stylesheet Preprocessor
https://sass-lang.com
/usr/local/Cellar/sass/1.43.5 (7 files, 8.5MB) *
  Built from source on 2021-11-30 at 09:38:03
From: https://github.com/sass/homebrew-sass/blob/HEAD/sass.rb
==> Dependencies
Build: dart-lang/dart/dart ✔

sass input.scss output.css

sass-test
├── css
│   └── style.scss //SCSS ファイル
└── index.html

//css ディレクトリに移動
$ cd /Applications/MAMP/htdocs/sass-test/css  return

//コンパイル
$ sass style.scss style.css  return 

sass-test
├── css
│   ├── style.css //CSS ファイル（コンパイルされ自動的に生成される CSS）
│   ├── style.css.map //map ファイル（自動的に生成されるソースマップ）
│   └── style.scss //SCSS ファイル
└── index.html

sass-test
├── index.html
└── sass
    └── style.scss //SCSS ファイル

$ cd /Applications/MAMP/htdocs/sass-test  return  //sass-test へ移動
$ sass sass/style.scss css/style.css  return 

sass-test
├── css  //指定したフォルダが存在しなければ作成される
│   ├── style.css //コンパイルされ自動的に生成される CSS
│   └── style.css.map //自動的に生成されるソースマップ
├── index.html
└── sass
    └── style.scss

$ sass sass/style.scss  return
//コンパイルされた CSS がターミナルに出力される
h1, p {
  color: green;
}

sass input1.css:output1.css input2.css:output2.css ...

//One-to-One Mode
$ sass sass/style.scss css/style.css  return

//Many-to-many Mode
$ sass sass/style.scss:css/style.css  return 

//light.scss と dark.scss を light.css と dark.css にコンパイル
$ sass light.scss:light.css dark.scss:dark.css   return

$ sass sass:css  return 

sass-test
├── css
│   ├── style.css //コンパイルされ自動的に生成される CSS
│   ├── style.css.map
│   ├── style2.css //コンパイルされ自動的に生成される CSS
│   └── style2.css.map
├── index.html
└── sass
    ├── style.scss
    └── style2.scss

$ sass --help  return  //または sass -h
Compile Sass to CSS.

Usage: sass <input.scss> [output.css]
       sass <input.scss>:<output.css> <input/>:<output/> <dir/>

━━━ Input and Output ━━━━━━━━━━━━━━━━━━━
    --[no-]stdin               Read the stylesheet from stdin.
    --[no-]indented            Use the indented syntax for input from stdin.
-I, --load-path=<PATH>         A path to use when resolving imports.
                               May be passed multiple times.
-s, --style=<NAME>             Output style.
                               [expanded (default), compressed]
    --[no-]charset             Emit a @charset or BOM for CSS with non-ASCII characters.
                               (defaults to on)
    --[no-]error-css           When an error occurs, emit a stylesheet describing it.
                               Defaults to true when compiling to a file.
    --update                   Only compile out-of-date stylesheets.

━━━ Source Maps ━━━━━━━━━━━━━━━━━━━━━━━━
    --[no-]source-map          Whether to generate source maps.
                               (defaults to on)
    --source-map-urls          How to link from source maps to source files.
                               [relative (default), absolute]
    --[no-]embed-sources       Embed source file contents in source maps.
    --[no-]embed-source-map    Embed source map contents in CSS.

━━━ Other ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-w, --watch                    Watch stylesheets and recompile when they change.
    --[no-]poll                Manually check for changes rather than using a native watcher.
                               Only valid with --watch.
    --[no-]stop-on-error       Don't compile more files once an error is encountered.
-i, --interactive              Run an interactive SassScript shell.
-c, --[no-]color               Whether to use terminal colors for messages.
    --[no-]unicode             Whether to use Unicode characters for messages.
-q, --[no-]quiet               Don't print warnings.
    --[no-]quiet-deps          Don't print compiler warnings from dependencies.
                               Stylesheets imported through load paths count as dependencies.
    --[no-]verbose             Print all deprecation warnings even when they're repetitive.
    --[no-]trace               Print full Dart stack traces for exceptions.
-h, --help                     Print this usage information.
    --version                  Print the version of Dart Sass.