おためし受講中

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

フロントエンドの開発にはプログラムを制御・統合するビルドツール、処理を自動化し結果を出すタスクランナー、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連動と正しいディレクトリ管理

学生代表

  • 塩原 桜

    塩原 桜

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    02:16  (00:13 ~ )
    今時のフロントエンドは環境は、サーバープログラミング言語でできている!?
    04:55  (02:29 ~ )
    何故アジャイルが実現できるのか
    04:23  (07:24 ~ )
    SassはRubyの上で動いている
    01:05  (11:47 ~ )
    SassはRubyで動いている?
    02:12  (12:52 ~ )
    Sassとは何者!?
    03:56  (15:04 ~ )
    インデントで改装を表すSassの問題点
    04:38  (19:00 ~ )
    Sassをやるならちょっとだけ黒い画面を覚えよう!
    03:07  (23:38 ~ )
    Windowsで活用すべきプログラム、PowerSell
    05:00  (26:45 ~ )
    Macではパスを直接指定する
    01:37  (31:45 ~ )
    sublをコマンドラインで操作するシンボリックリンクを貼ろう
    03:38  (33:22 ~ )
    sublのパス指定はドラッグ&ドロップで行う
    03:00  (37:00 ~ )
    sassをコンパイルする
    04:11  (40:00 ~ )
    黒い画面でSublimeTextを立ち上げよう
    01:13  (44:11 ~ )
    【後半】質疑応答
    Q:制作の時にSassで制作し、実際に表示させるときにコンパイルしてCSSにするという発想でいいのでしょうか?
    00:53  (45:24 ~ )
    Q:MacユーザーはLessよりSassの方が手間が省けますか?
    02:42  (46:17 ~ )
    Q:変数以外に使える機能はありますか?
    01:22  (48:59 ~ )
    Q:scssも「サス」と読むのですか?
    00:33  (50:21 ~ )
    Q:PowerShellは、cmd.exeの上位互換と考えればいいですか?
    01:07  (50:54 ~ )
    Q:Sassの終了させる時は黒い画面は使いませんか?
    02:01  (52:01 ~ )
    Q:SassはCSS3も対応していますか?
    01:25  (54:02 ~ )
    Q:同じターミナル画面上で、サブライム2と3を入力しても大丈夫ですか?
    00:48  (55:27 ~ )
    Q:Sassを入れると何ができるのでしょうか?
      (56:15 ~ )