Sass ⇒ CSSのコーディング効率やソースコードの保守性を向上させる技術です。
Sassの特徴
変数$
関数
入れ子(ネスト)
ミックスイン
Sassを使うにはRubyをインストールする必要があります。
Ruby on Railsとは?
Webアプリケーションを作るためのフレームワーク。
Sassを使えるようにするまでの流れ
①Rubyのインストール
②Sassのインストール
③Koalaのインストール
Rubyのインストール
『Rubyinstuller』で検索。『Download』をクリック。
自分のパソコンにあったバージョンを選ぶ。『エクスプローラー』の『PC』で右クリック『プロパティ』で自分のパソコンの『システムの種類』が分かります。今回は『Ruby2.2.1(x64)』を選択。
『完了』をクリック。
『Rubyの実行ファイルへ環境変数パスを設定する』にチェックをして『インストール』をクリック。
上手くインストールされれば、コマンドプロンプトに『ruby -v』と打ち込んでrubyのバージョンが表示されます。これでRubyがインストールされたことになります。
Sassのインストール
続いてSassのインストールですが、windowsの場合、『gem install sass』と入力するとエラーが出る場合があります。エラーが出ずに、
『Fetching: sass-3.4.13.gem (100%)
Successfully installed sass-3.4.13
Parsing documentation for sass-3.4.13
Installing ri documentation for sass-3.4.13
Done installing documentation for sass after 4 seconds
1 gem installed』
のような表示が出ればSassのインストール成功です。
エラーが出た場合は下記手順を実行していきます。
『gem source -a http://rubygems.org/』と入力することで、https://rubygems.orgとなっているものをhttp://rubygems.orgに変換してます。
『Do you want to add this insecure source?[yn]』と出てくるので、『y』を入力([yn]はyes or noという選択だと思われるのでyesの『y』を入力)
『http://rubygems.org/added to sources』と表示されたら、『gem install sass』と入力し、いろいろ表示が続き最後に『1 gem installed』と表示されればSassのインストール完了です。
Koalaとは?
Sassもコンパイルが必要。ふつうはコマンドプロンプトを使う。
Koala ⇒ SassからCSSへのコンパイルを自動でしてくれる。
Koalaをインストール
http://koala-app.com/のサイトでダウンロードをクリック。
ファイルを選択してダウンロードをクリック。
Koalaのインストール
下記画面が出ればKoalaのインストール完了です。
Sassファイルを作ってKoalaを使ってコンパイルしてみる
デスクトップに新規フォルダ作成(今回は『sasstry』という名前のフォルダ名にします。)
『sasstry』フォルダの中にファイルを1つ作成します。今回は『style.scss』という名前のファイル名にします。
必ずファイルの拡張子を『.scss』にします。
例:Sassの入れ子
style.scss
#main {
width:100px;
h1 {
font-size:18px;
} //h1の締め
} //#mainの締め
『sasstry』フォルダを『Koala』にドラッグ&ドロップします。
『アウトプットスタイル』を決めて『コンパイル』をクリックして『SUCCESS』と表示されればコンパイル成功です。
コンパイルに成功すると『sasstry』フォルダに『style.css』ファイルが追加されます。