トップ > 小さな講習会 > SASSの基本を理解するための講習会

SASSの基本を理解するための講習会

小さな講習会

前提の環境

なぜSASSを使うのだろう？と思ったら

SASSのメリットを実感するには書き方の理解が大切です。
SASSの書き方を勉強して下さい。
lifequest-blog.com

blog.nest-online.jp

qiita.com

英語が読めるなら本家サイトへGo!です。
sass-lang.com

SASSを使える環境構築

  1. RubyGemsをインストールします。qiita.com
  2. Conpassとbootstrap-sassをインストールします。qiita.com
    • 「おまけ」部分は基本的に不要です。

SASSの構成

親ディレクトリ
├ css
｜├ *.css <------ *.sassファイルをコンパイルして出力される
｜└ *.css.map <------ *.sassファイルをコンパイルして出力される
└ sass
　├ *.scss <------ このファイルを編集する。CSSと同じような記述が可能。
　└ sass.bat <------ *.scssファイルの状態を監視して保存を検知したらコンパイルしてくれるバッチ

スタイルを編集する方法

① *.scssの監視を開始する

  1. sass.batを起動します。Eclipseのプロジェクトエクスプローラーなどでダブルクリックしても起動します。
  2. コマンドプロンプトが起動して *.scssファイルの監視がはじまります。

② *.scssファイルを編集する

追加・変更・削除したい内容を*.scssファイルに記述して保存します。
sass.batを止めるまでsassディレクトリ配下の*.sassファイルはどれを何回更新してもOKです。
書き方は勉強して下さい。
tetra-themes.com

③ コンパイルでエラーがないことを確認する

  1. 表示されたコマンドプロンプトなどを見る
  2. 以下のようにエラーなく出力されていることを確認する
>>> Change detected to: sass/{ファイル名}.scss
      write css/{ファイル名}.css
      write css/{ファイル名}.css.map

④ *.scssの監視を終了する

  1. 表示されたコマンドプロンプトで「Ctrl + C」を押下します。
  2. コマンドプロンプトが閉じて監視がおわります。

⑤ *.cssでコンパイル結果を確認する

  1. コンパイルで出力された*.cssを見ます。
  2. 編集した内容のみ変更されていることを確認します。

ポイント : SourceTreeなどGitのツールやコマンドを使って差分を確認すると楽できます。

コンパイルで出力される物を知る

*.css

スタイルシートです。
SASSを導入している場合は、このファイルを直接編集することは決してなりません！

直接編集すると恐ろしいことが！例えば・・・

  1. Aさんが*.cssを直接編集する
  2. Aさんがテストして変更内容を確認する
  3. Bさんが*.scssを編集してコンパイルする
  4. *.cssは再出力されてAさんが編集した内容は消える
  5. テストが終わったはずのAさんの編集内容は無くなりデグレとなる・・・

*.css.map

これは、ソースマップファイルといいます。

ソースマップファイルは、SASSだけに存在するわけではありません。
lealog.hateblo.jp

ソースマップファイルがあればブラウザで表示した時に*scssファイルのどこにスタイルが記載されているかわかります。
blog.webcreativepark.net

Gitなどで管理していた時に大人の事情でソースマップファイルはコミットはしない場合があります。
そんな場合は、.gitignoreなどに定義して誤ってコミットされることを防ぎます。

*.scssc

これは、キャッシュファイルです。

キャッシュファイルもソースマップファイル同様にコミットはしない場合があります。
そんな場合は、やはり.gitignoreなどに定義して誤ってコミットされることを防ぎます。

バッチファイルを知る

cd /d %~dp0
cd ..
sass --watch sass:css --style expanded -E utf-8

qiita.com

コンパイル時にエラーが出たら原因を調べて解決するべし

Invalid UTF-8 character {Unicodeのバイト}

原因 : *.scssファイルの文字コードが「UTF-8」以外で日本語が記載されています。
対応 : ファイルの文字コードを「UTF-8」にして下さい。

Invalid CSS after "...style-type none": expected "{", was ";")

原因 : スタイル定義の書き方が誤っている(このエラーの場合「list-style-type: none;」の「:」がない)
対応 : 対象となっている行の書き方を修正して下さい。

EISDIR: Is a directory @ io_fread - sass

原因 : 監視ではなくコンパイルをするのにディレクトリを指定している
対応 : コンパイルであればファイル、監視であればファイルまたはディレクトリを指定する

$ sass sass:css <-------- 「--watch」オプションがないのでコンパイル
Errno::EISDIR: Is a directory @ io_fread - sass
  Use --trace for backtrace.
$ sass sass/style.scss:css/style.css <--------- コンパイルはファイルを指定する

Error: Undefined variable: "${定義されていない変数}".

原因 : 定義されていない変数が使われている
対応 : どの変数を記載しようとしているのか、定義してから使用しているのか見直して下さい。

$ sass sass/style.scss:css/style.css
Error: Undefined variable: "$widthpx".
        on line 11 of sass/style.scss, in `width'
        from line 41 of sass/style.scss
  Use --trace for backtrace.

$ cat sass/style.scss <--------- 修正前
<省略>
@mixin width($width) {
    width: $widthpx; <-------------- width: 10px;的なノリで記載したが「$widthpx」という変数になった。
}
<省略>

$ cat sass/style.scss <--------- 修正後
<省略>
@mixin width($width) {
    width: $width + px;
}
<省略>

$ sass sass/style.scss:css/style.css <------ エラーなくコンパイル完了

その他

原因 : 調べる

調査方法① メッセージをよく読む
調査方法② トレースしてみる
$ cd {親ディレクトリ}
$ sass --trace sass:css
調査方法③ メッセージを完コピしてググる