cssはネストの構造を記述する事ができないため、うまく優先順位を考慮しなければ指定できなかったり、後で書いた記述に上書きされてしまったりします。CSSプリプロセッサ(CSS拡張メタ言語)を使えばhtmlのネスト構造のままスタイルを設定できるようになります。大規模なサイトになるほどネストの階層は深まって行きますが、そのままの構造でスタイルが当てられるのでセレクタが被る事がありません。また、ナビボタンに一つづつ違う画像を指定するなどの連番のクラス名をつける、4〜5個のベンダープレフィックスをつけるなどを、一発指定するという神業をやってのけます。
この授業はCSSプリプロセッサSassをSublimeTextに導入して操作する方法を学びます。
CSSプリプロセッサにはBootstrapで採用されているLessなどがありますが、Sassはcssに近いScss記法で親しみやすいため、最もユーザー数の多いCSSプリプロセッサです。
Rubyをインストールする必要があります。MacはRubyが標準装備されています。Windowsの方は、下記のサイトを参照にしてRubyのインストールをしてください。
http://www.rubylife.jp/install/install/index1.html
※Subulime Textがインストールされている事を前提に授業が進んでいきます。
1)Sublimeのインストール
下記のURLからダウンロードしてください。
http://www.sublimetext.com/2
2) Sublimeの設定
下記の授業を見て、必要な設定をしておく事をお勧めします。
・マルチデバイス対応コーディングのためのSublimeText【環境整備編】
3) 以下の授業を受講するとより理解が深まります。
・コーディング時間を1/3にするSublimeTextだからできるemmet連動
・SublimeTextだからできるFTP連動と正しいディレクトリ管理
スクー放送部
残り枚数:- 枚