chevron_left

SublimeText入門

PREMIUM
第4回

Sass導入に必須!SublimeTextで黒い画面(コマンドライン)と仲良くなる

2015年1月31日 60min

スライド資料

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

1 / 52

授業の概要

フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、CSS拡張メタ言語からCSSをコンパイルするCSSプリプロセッサなどが導入されるようになり、それらの使用には「黒い画面」と呼ばれているコマンドラインが必要不可欠になってきました。

1回目は、その中でも定番と言っていいほど導入の進んでいるSassを導入するためのコマンドラインを使った設定を学んでいきます。

コマンドラインはMacでは「ターミナル」、Windowsには「コマンドプロンプト」がデフォルトで用意されています。Windowsではもう一つのコマンドラインツールであるPowerShellがあり、SublimeTextを中心に構築していくフロントエンド開発環境ではPowerShellを使用します。初めて名前を聞く人もいると思いますので、
標準装備されているのを確認してください。

Windws 7
スタートメニュー>すべてのプロラム>「Windows PowerShell」と入力すると確認できます。
Windws 8
スタート画面>すべてのアプリ>「Windows システムツール」の項目にあります。

※Subulime Textがインストールされている事を前提に授業が進んでいきます。

1)Sublimeのインストール

下記のURLからダウンロードしてください。
http://www.sublimetext.com/2

2) Sublimeの設定

下記の授業を見て、必要な設定をしておく事をお勧めします。
マルチデバイス対応コーディングのためのSublimeText【環境整備編】

3) 以下の授業を受講するとより理解が深まります。

コーディング時間を1/3にするSublimeTextだからできるemmet連動
SublimeTextだからできるFTP連動と正しいディレクトリ管理

こんな人にオススメ

Sassを導入して、爆速でcssを書いてみたい人

チャプター

play_arrow
自己紹介&アジェンダ
02:16
play_arrow
今時のフロントエンドは環境は、サーバープログラミング言語でできている!?
04:55
play_arrow
何故アジャイルが実現できるのか
04:23
play_arrow
SassはRubyの上で動いている
01:05
play_arrow
SassはRubyで動いている?
02:12
play_arrow
Sassとは何者!?
03:56
play_arrow
インデントで改装を表すSassの問題点
04:38
play_arrow
Sassをやるならちょっとだけ黒い画面を覚えよう!
03:07
play_arrow
Windowsで活用すべきプログラム、PowerSell
05:00
play_arrow
Macではパスを直接指定する
01:37
play_arrow
sublをコマンドラインで操作するシンボリックリンクを貼ろう
03:38
play_arrow
sublのパス指定はドラッグ&ドロップで行う
03:00
play_arrow
sassをコンパイルする
04:11
play_arrow
黒い画面でSublimeTextを立ち上げよう
01:13
play_arrow
Q:制作の時にSassで制作し、実際に表示させるときにコンパイルしてCSSにするという発想でいいのでしょうか?
00:53
play_arrow
Q:MacユーザーはLessよりSassの方が手間が省けますか?
02:42
play_arrow
Q:変数以外に使える機能はありますか?
01:22
play_arrow
Q:scssも「サス」と読むのですか?
00:33
play_arrow
Q:PowerShellは、cmd.exeの上位互換と考えればいいですか?
01:07
play_arrow
Q:Sassの終了させる時は黒い画面は使いませんか?
02:01
play_arrow
Q:SassはCSS3も対応していますか?
01:25
play_arrow
Q:同じターミナル画面上で、サブライム2と3を入力しても大丈夫ですか?
00:48
play_arrow
Q:Sassを入れると何ができるのでしょうか?