のーとぅせるふ

SASSコンパイル用ライブラリ

sass/scssのコンパイル用のライブラリの使い方が公式のgithubくらいしかなかったもんで自分用にまとめ

sassとはなんぞやってのは割愛

install

選択肢としてsass/sassか個人的に使うのがdart板のsass/dart-sassの2択かなと

(そもそもなんかこの2つ以外あんまり更新されてない気がする rubyとか半年以上前だし)

楽な方

node使えるならnpmで落としてそのまま使えるので簡単

npm install -g sass

実行ファイル落としてくる場合

宗教的理由等でnodeが使えない場合はsass/dart-sassを使うしかないっぽい

当リポジトリのリリースから最新のバージョンのファイルをDLしてpathを通す必要がる(めんどい)

以下は一例

cd /usr/local/src

# 記事作成時点最新
wget https://github.com/sass/dart-sass/releases/download/1.83.0/dart-sass-1.83.0-linux-x64.tar.gz
tar -zxf dart-sass-1.83.0-linux-x64.tar.gz && cd dart-sass

# 特定のユーザしか使わないだろうし`~/.local/bin`を選択
# 別にpathが通ってれば`.local/bin`でなくても良い(`/usr/local/bin`とか)
mkdir -p ~/.local/bin && cp ./* ~/.local/bin/

一緒に入ってるsrcをsassコマンドと同ディレクトリに置かないと動かないらしい(私のやり方が悪かっただけで不要かも)

一応これでnpm使わない場合でもsassコマンドが使用可能になる

使い方

ざっくりこれ

sass /path/to/style.scss /path/to/style.css

/path/to/style.scssを/path/to/style.cssにコンパイルする

出力先にファイルが存在しても上書きの確認はされないので注意

ディレクトリごとまとめて変換する方法

sass /path/to/scss:/path/to/css

/path/to/scss以下のscssを一括で/path/to/css以下にコンパイルして出力

変換後のファイル名は{元ファイル}.scss => {元ファイル}.cssとなる

オプション

よく使いそうなのだけ抜粋

  • --update: 更新日ベースで更新のあったファイルのみ変換する
  • --style=: compressedを指定することでミニファイしてくれる デフォルトはexpanded(ミニファイ無し)
  • --no-source-map: 変換時にソースマップを生成しない 生成されても使わない場面のが多いし個人的に不要
  • --quiet: 警告を出さない
  • --no-quiet: 警告を出す

私的普段使いテンプレ

sass --style=compressed --no-source-map /path/to/scss:/path/to/css
Fullsized Image