chevron_left

SublimeText入門
PREMIUM
第5回

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

2015年2月14日 60min
Sublime Text+Sassで爆速コーディング【インストール編】 play_arrow おためし受講

スライド資料

会員登録して、全てのスライドを見よう

1 / 40

授業の概要

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

こんな人にオススメ

本格的なフロントエンド開発環境を学びたいコーダー志望の方

担当の先生／パーソナリティ

チャプター

play_arrow
自己紹介＆アジェンダ
02:43
play_arrow
Sassって何だろう？
02:29
play_arrow
windows版でのSassインストール方法
04:15
play_arrow
gem install sassとコマンドラインに打とう
09:04
play_arrow
sass -vと打ってsassのバージョンを確認
01:49
play_arrow
Mac版でのRubyのインストール方法
06:57
play_arrow
任意の場所にSass_testというフォルダを作ろう
05:12
play_arrow
Package Controlをインストールしよう
02:08
play_arrow
sassのローカル環境を作ってみよう
09:43
play_arrow
test.htmlをemmetで打ってみよう
03:15
play_arrow
Ｑ：操作可能なプログラムまたはバッチファイルとして認識されていません。と出てしまいました。
01:39
play_arrow
Ｑ：sassを導入するメリット・デメリットをもう一度教えて頂けますでしょうか？
02:53
play_arrow
Ｑ：MacでEmmetを起動するコマンドを教えて下さい。
01:20
play_arrow
Ｑ：スライド29Pですが、scssのあとと打ってその後選択するものは何ですか？
01:12
play_arrow
Ｑ：scssプラグインの入れ方をもう一度お願いします