おためし受講中

Sublime Text+Sassで爆速コーディング【インストール編】

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連動と正しいディレクトリ管理

学生代表

  • 大木 しのぶ

    大木 しのぶ

    スクー放送部

【ノート機能】
授業内容や覚えておきたいポイントなど、ノートに自由に残せます

再生位置挿入 資料挿入
筆記アシスト
ONOFF