少し前にSass(Scss)を使うための手順を作ったからそのコピペを貼っておく。
忘れた頃に思い出せるように、保管。
Sass(Scss)って何？
わかりやすく言うと、CSSを早く書くのを支援してくれるツール。
例えばで、こんなコードがあるとする。
#main {
width: 940px;
}
#main p {
font-size: 14px;
}
これが、Sass(Scss)を使うことで、以下に省略できる。
#main {
width: 940px;
p {
font-size: 14px;
}
}
他にも、プロパティなどを変数にしたりできる。要するに、今まで繰り返し書いていたことをプログラムで自動で書いてくれるようにするって感じ。
という、素晴らしいツールなので、是非導入しよう。導入方法は以下。
（自分はMacでしか導入したことがないので、Windows版は他サイトを参考にして作成）
Sass(Scss)導入手順
１、Rubyのインストール
Sass(Scss)はRubyを使ってコンパイル(変換)をする。そのため、初めにRubyをインストールする必要がある。
①MACの場合
MACにはRubyがデフォルトでインストールされている。いえーい。
アップデートをする場合、以下のコマンドをターミナルに入力することでアップデートできる。
rubygems-update
バージョンを確認する場合は以下のコマンド
gem -v
これで１は終了。
②Windowsの場合
まず、文字化け対策として以下のコマンドで文字コードをUTF-8にする。
set LANG=ja_JP.UTF-8
次に、下記URLから、一番上にあるバージョンをダウンロード。
http://rubyinstaller.org/downloads/
ダウンロードが完了したら、ファイルを実行し、手順に従ってインストールを。
ここで、「インストール先とオプションの指定」の時に「Rubyの実行ファイルへ環境変数PATHを設定する」と「.rbと.rbwファイルをRubyに関連づける」にチェックをつけよう。
インストールが完了したら、コマンドプロンプトで以下のコマンドを入力してバージョンを確認。
ruby -v
rubyのバージョンが出ない場合、「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを付け忘れているかもしれない。再インストールを。
次に、先ほどのURLからDEVELOPMENT KITをダウンロード。いくつかあると思うけど、先ほど確認したバージョンと同じものを選択。
ダウンロードが完了したら、ファイルを実行。
展開する場所を聞かれるから、
C:\devkit\
を指定しよう。まあ、どこでもいいっちゃいいらしいけど、みんなそうしてるみたいだし。
次に、コマンドプロンプトから以下のコマンドを入力。
cd C:\devkit\ ruby dk.rb init ruby dk.rb install
以下のような表示がされればインストール完了。
[INFO] Updating convenience notice gem override for 'C:/Ruby21' [INFO] Installing 'C:/Ruby21/lib/ruby/site_ruby/devkit.rb'
ちなみに、既にRubyをインストールしてあり、アップデートをしたい場合は以下
gem update --system
これで１は終了。
２、Sassのインストール
Sassはターミナル(コマンドプロンプト)からインストールする。またコマンドになるけど、コピペで大丈夫。
①MACの場合
以下のコマンドをターミナルに入力し、Sassをインストールします。
sudo gem install sass
インストール完了後、バージョンを確認したい場合は以下のコマンド
sass -v
これで２は終了。
②Windowsの場合
以下のコマンドをコマンドプロンプトに入力し、Sassをインストールする。
gem install sass
インストール完了後、バージョンを確認したい場合は以下のコマンド
sass -v
これで２は終了。
３、scssからcssを作成
まず、テスト用のフォルダを２つ作成する。
Desktop/sass_test/css/ Desktop/sass_test/scss/
次に、scssフォルダの中にstyle.scssを作成。
中にはテスト用スタイルを記述し、保存する。
Desktop/sass_test/scss/style.scss
#main {
width: 940px;
p {
font-size: 14px;
}
}
次に、scssフォルダのある場所に移動する。
cd ~/Desktop/sass_test/
その後、以下のコマンドを入力
sass --style expanded --watch scss:css --style expanded
これを実行することで、ターミナル（コマンドプロンプト）を開けてる間、scssフォルダにあるscssを保存するたびに自動でcssフォルダにあるcssも更新してくれる(cssがない場合は作成してくれる）。
エラーなく保存されれば、cssフォルダに以下のstyle.cssが生成される。
Desktop/sass_test/css/style.css
#main {
width: 940px;
}
#main p {
font-size: 14px;
}
保存されない場合はターミナル（コマンドプロンプト）にエラーが出ていると思う（大体がフォルダ指定ミス）。
保存後、mapファイル等が自動で生成されるけど、作業中は消さないこと。
自動保存の終了はcntl＋c。
以上！
やってることは、Rubyインストール→Sassインストール→Sassの使いたいフォルダに入ってSassを実行って感じ。
ターミナル（コマンドプロンプト）でのコマンドの一覧は以下を見るといいかも。
http://book.scss.jp/code/c2/04.html
次にSass(Scss)の記述の仕方について
いくつか例を置いて記述例を紹介。
指定の簡略化
変換前
#main {
width: 940px;
p {
font-size: 14px;
}
}
↓
変換後
#main {
width: 940px;
}
#main p {
font-size: 14px;
}
CSSの指定を入れ子にできる。
時間を短縮できる他、見やすくも書くことができる。
プロパティの簡略化
変換前
#main {
font: {
size: 9pt;
family: Arial;
weight: bold;
}
}
↓
変換後
#main {
font-size: 9pt;
font-family: Arial;
font-weight: bold;
}
-で区切ってるプロパティをひとまとめに出来る。
セレクタの簡略化
変換前
#main {
&:hover { color: red; }
}
↓
変換後
#main:hover {
color: red;
}
:で区切ってるやつをまとめて書ける。aタグに使うくらい？
変数（！重要）
変換前
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
↓
body {
font: 100% Helvetica, sans-serif;
color: #333;
}
jsで言う、var。文字の色とか背景色とか、共通のマージンを一括で変更できる便利なやつ。
セレクタ等にも変数（！重要）
変換前
$name: foo;
$attr: "border";
p.#{$name} {
#{$attr}-color: blue;
}
↓
p.foo {
border-color: blue;
}
プロパティ以外にも、クラスにも使える。めっちゃ便利なやつ。
ミックスイン（！重要）
変換前
@mixin mybox {
border: 1px solid #999;
}
h4 {
@include mybox;
}
↓
h4 {
border: 1px solid #999;
}
変換前
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
↓
.box {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
変換前
@mixin mybox($color:#333, $width:1px) {
border: $width solid $color;
}
p {
@include mybox($width:3px);
}
↓
p {
border: 3px solid #333;
}
２つをがっちゃんこするやつ。これと変数を合わせてどこまで書けるかでスピードが劇的に変わる。
ただ、コーディングというよりかはプログラミングと言ってもいい感じあるし、慣れるまで時間がかかる。
その他、他のscssと結合して変換する機能や、if文による制御などがあるけど、重要なのは上記だと思うよ。
・Sassの記述一覧
http://www.tohoho-web.com/ex/sass.html
では