CSSをササッと書けるかもしれないSASS（SCSS）を触ってみた。

BLOG, DESIGN, TOOL, WEB

MontBlanc.です。
今回WEBサイトを作成する際にSASS（SCSS）を使用したので、メモ兼感想をば。

導入方法

ターミナルからコンパイルしたり等の方法もありますが、今回はSCOUTというコンパイルツールを使いました。
SCOUT：https://mhs.github.io/scout-app/

インストール後は左下にある「＋」を選択して、SASSを扱うサイトの一番上の階層のフォルダを選択しプロジェクトの作成を行う。
次に、SCSSファイルを扱う場所と実際にCSSファイルとして書き出す場所を指定します。

Input Folder：SCSS/SASSを読み込むフォルダを指定（例：css/scss/）
Output Folder：上記で記入したものをCSSとしてコンパイルするフォルダを指定（例：css/ or css/output）

ここでつまづく・・・

本来であれば、この後に該当するリストから再生ボタンを押すとコンパイル態勢が整うのですが、
「No Java runtime present, requesting install. 」とエラーが出てしまい一向に動かない・・・。
「Javaがないからインストールしてね！」という意味っぽいのでJAVAの最新版を入れてみても動かず・・・。

色々調べた結果下記ページで解決！
http://yoraji.blogspot.jp/2015/08/sass-mac-os-x-yosemitescoutjava.html
どうも最新版のJAVAを読み込んでくれないらしく、古いバージョンを設定すると動くとのこと。

下記ページから旧バージョンのJAVAをダウンロード。
https://support.apple.com/kb/DL1572?locale=ja_JP
インストールしたところ、無事起動ができました！

実践したこと

変数を使う

ユニークな変数を設定し、指定した変数の値を変更することにより変数を設置した箇所を一括で変更できます。
文字色と背景色などを一括で変更する時に便利ｂ

　
/*SCSSで変数を定義*/
$KEY_COLOR:#ccc;
$MAX_CONTENT_WIDTH:960px;

/*変数を利用*/
.hoge{
　width:$MAX_CONTENT_WIDTH;
　background:$KEY_COLOR;
　color:$KEY_COLOR;
}
h3{
　border:1px solid $KEY_COLOR;
}

/*CSSへコンパイル後*/
.hoge{
　width:960px;
　background:#ccc;
　color:#ccc;
}
h3{
　border:1px solid #ccc;
}
　

入れ子を使う

CSSでネスト化（htmlみたいにタグの中にタグを入れる）ことが可能に。
便利ですが、アウトプット時にCSSの記述が増えるのでパフォーマンスに影響が出る点と、単純に美しい記述じゃない・・・。

　
/*SCSSで記述*/
#hoge{
　width:100px;
　height:auto;
　margin:0 auto;
　　#pon{
　　　line-height:1.5em;
　　　　p{
　　　　　font-size:12px;
　　　　}
　　}
}

/*CSSへコンパイル後*/
#hoge{
　width:100px;
　height:auto;
　margin:0 auto;
}
#hoge .pon{
　line-height:1.5em;
}
#hoge .pon p{
　font-size:12px;
}
　

って感じです。
他にもMixinや継承(Extended)などの機能もあるので、そこまで使いこなせなかったっす・・・！
また次回の機会に使えるようにしていきたいですね。

使ってみての感想

今の今までCSSで書いていた身としては、入れ子を使っての感覚的な点、
変数を使っての設計を意識した書き方が行えるのは結果としてスピード感のあるコーディングが出来て良いと思います。

ただ、SCSSからコンパイルされたCSSがちょっと汚いな・・・という印象。
何個かの参照サイトでも記法はパフォーマンスの低下に注意と書かれているものも多いので、記法には気を使って書いていった方が良さそうです。

参考サイト：
http://dev.classmethod.jp/ria/web-desiner-corder-scss-tutorial/