SCSSとSASS

SCSSとSASSについてのアウトプットです。

1）Rubyをインストール（Macの場合は予め入っているので不要）
RubyInstaller

$ ruby -v  //rubyのバージョン確認。出なければインストール必要

2）Sassのインストール（Mac版）
SCSSを使う場合もこちらを行う。

＄ sudo gem install sass　//インストール
$ sass -v　//バージョン確認： 表示されればOK

3）Sassの監視（watch）
フォルダを指定し監視することで、.scssファイルが.cssファイルに自動変換される仕組み。

$ sass --watch before:after
// before:afterの部分について、
// before → ○○.scssのファイルを格納したフォルダを指定
// after → 変換後のCSSを格納するフォルダを指定

4）記法の違い（CSS、SASS、SCSS）

// CSS

div {
    margin: 0 auto;
}
 
div p {
    padding: 20px;
}

div p span {
    font-color: red;
}

// SASS:インデントを使い記載。{}や;は使わない。

div
    margin: 0 auto
    p
        padding: 20px
        span
            font-color: red;

// SCSS:入れ子
div {
    margin: 0 auto;
    p {
        padding: 20px;
        span {
             font-color: red;
        }
    }
}