[css]SCSSを導入しよう。

はじめに

cssをより見やすい文法で記述する方法にscss/sassがあります。

scss/sassに必要なもの

  1. rubyのgemパッケージ(ライブラリのようなもの)のscss/sassのインストール
  2. 1. を利用するためのruby自体のインストール

インストール手順については、こちらのサイト様が分かりやすくなっています。

scss/sassをcssに変換する。

scssファイルをコンパイルしてcssファイルに変換します。

windowsのコマンドプロンプトで以下のコマンドを実行します。

記法

sass 【scssファイル名】:【cssファイル名】

sass source.scss:dest.css

変換時の注意点

『:』の前後にスペースを入れると以下のようなエラーが発生します。

Errno::EINVAL: Invalid argument @ rb_sysopen - :
Use --trace for backtrace.

生成されるファイル

一度の変換(コンパイル)で生成されるファイルは以下の3ファイル

1.dest.css

2.dest.css.map

ブラウザの検証ツールでscssの行数などを知ることができデバッグ作業に役立てることができます。

またこの変換情報は変換後のcssにも記載されています。

{
  "version": 3,
  "mappings": "AAEA,OAAQ;EACJ,OAAO,EAAE,GAAW;EACpB,MAAM,EAAE,GAAW;EACnB,YAAY,EALT,OAAO",
  "sources": ["source.scss"],
  "names": [],
  "file": "dest.css"
}
/*# sourceMappingURL=dest.css.map */

mappingファイルの出力が不要な場合は、以下のパラメータを追加します。

--sourcemap=none

3.sass-cache

コンパイルの時間短縮に役立ちます。ファイル出力が不要な場合は、以下のパラメータを追加します。

--watch test --no-cache

コンパイルの自動化

sassファイルを修正するたびに、コンパイルのコマンドを実行するのは面倒ですよね。

そんな場合は以下のパラメータを追加しましょう。コードを修正しファイルが保存されると同時に、コンパイルを自動的に実行してくれます。

ファイル単位

sass --watch source.scss:dest.css

source.scssが修正されると同時に、dest.cssへ自動変換されます。

フォルダ単位

sass --watch sourceFolder:destFolder

指定したフォルダ内のファイルが修正されると同時に、出力フォルダへcssファイルが自動変換されます。

コマンドプロンプト上での表示

C:\>sass --watch sourceFolder:destFolder
>>> Sass is watching for changes. Press Ctrl-C to stop.
  write destFolder/source1.css
  write destFolder/source1.css.map
  write destFolder/source2.css
  write destFolder/source2.css.map
  write destFolder/source3.css
  write destFolder/source3.css.map
 >>> Change detected to: sourceFolder/source1.scss
  write destFolder/source1.css
  write destFolder/source1.css.map
 >>> Change detected to: sourceFolder/source2.scss
  write destFolder/source2.css
  write destFolder/source2.css.map
 >>> Change detected to: sourceFolder/source3.scss
  write destFolder/source3.css
  write destFolder/source3.css.map

自動化を終了する

自動化を終了するにはコマンドプロンプト上でCtrl + Cを押下します。

 

SCSSコマンドの使い方

scssにはこれ以外にも様々なコマンドの書き方があります。

コマンドの書き方については、こちらのサイト様にまとめられています。

 

コメントを残す