なんとなくぼんやりとわかっているけども実際にやってみないとわからないことは多いので、手を動かす！

基本的なこと

コメントの書き方

/* ... */と//を使うことが出来ます。

ただし、//はコンパイル後、作成されたCSSではコメントとして表示されません。

データ型

名称	概要
数値	単位がついているものも含む
文字列	引用符の有無は問わない
色	色名、HEX、rgb、hslなど
真偽値	真＝true　偽＝false
リスト	値をスペースやカンマで区切って並べたもの

コンパイルする

メタ言語なのでコンパイルしなくちゃいけません。

作成する

1. 好きなところ（C:\Users\（UserName）直下に今回は作成しました。）にSassDirというディレクトリを作成し、sassフォルダとcssフォルダを作成します。
2. sassフォルダ内にstyle.scssファイルを作成しエディタで開き、作業開始です。

style.scssには、このような感じで書いてみました。

コマンド

1.　移動

style.scss ファイルが完成したら、いよいよstyle.scssをコンパイルしてstyle.cssファイルを作ります。

ファイルの指定はコマンドラインのルートからのパスになるので、まずディレクトリの移動をします。

Windowsの場合、コマンドラインを起動するとC:\Users\（UserName）>になっていると思うので、これをC:\Users\（UserName）\SassDir>としたいと思います。

2.　コンパイル

出来上がったファイルをコンパイルします。

CSSフォルダにstyle.cssファイルが作成されていると思います。

出来上がりのCSSの中身はこのようになります。

補足

圧縮されるオプションを指定したコマンド

Watch

SCSSファイルの変更がある度に、コマンドを実行するのは面倒です。

そこでSassではファイルの更新を監視して、変更があった時に自動でコンパイルしてくれるコマンドWatchを使います。

既に同名のファイルが存在する場合は上書きになります。

監視を終了する場合はWindowsもMacもCtrl+Cです。

アプリを使えばこういった手間がなくなるのでとてもいいのですが、いざアプリがない場合の環境で使うことになったときを考えると、きちんと覚えておこうと思います。

最後に

ドットインストール

全15回あります。本当に無料でいいんですか？と毎回ここへ来るたび思い、感謝しているドットインストールのSassレッスンを受けました。