おためし受講中

Sass/Compassで快適なcss自動コンパイル環境構築

CompassとはSassをさらに強力にしてくれるSublimeTextのパッケージで、スプライト自動作成、プロジェクトごとに設定ファイルを適用したり、ベンダーフィックスやクロスブラウザ対応を自動生成してくれる、すぐれたフレームワークです。また、SassとCompassを元に作られたオープンソースのライブラリはネット上で多数配布されています。4回目はSublimeTextにCompass用のパッケージをインストールして自動コンパイルを実現する手法を学びます。

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

1)Sublimeのインストール

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

2) Sublimeの設定

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

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

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

学生代表

  • 塩原 桜

    塩原 桜

    スクー放送部

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

再生位置挿入 資料挿入
筆記アシスト
ONOFF
    【チャプター機能】
    授業内容をピンポイントでおさえながら
    ご自身のペースで進めることができます
    【前半】授業
    自己紹介&アジェンダ
    03:53  (00:13 ~ )
    compassのインストールとプロジェクト作成
    04:29  (04:06 ~ )
    compassのプロジェクト作成①
    03:47  (08:35 ~ )
    compassのプロジェクト作成②
    04:55  (12:22 ~ )
    プロジェクトの中身をみてみよう
    06:58  (17:17 ~ )
    コマンドラインでwachオプション設定をしよう
    02:03  (24:15 ~ )
    compassでコンパイルしてみよう
    01:46  (26:18 ~ )
    QKタイム:「sassは@import使える?」
    07:16  (28:04 ~ )
    スプライト画像とは
    02:13  (35:20 ~ )
    スプライト画像生成手順
    05:43  (37:33 ~ )
    mainでclearをする
    06:36  (43:16 ~ )
    今回のまとめ
    02:34  (49:52 ~ )
    【後半】質疑応答
    Q:サイズが統一されてない背景画像もちゃんと計算して出るのでしょうか。
    00:52  (52:26 ~ )
    Q:iconフォルダーの元画像は消してもいいんですか?
    00:44  (53:18 ~ )
    Q:カルーセルに使うメイン画像にも使えるのですか?
    00:50  (54:02 ~ )
    Q:画像のファイル形式は統一しなければいけないのですか?
    01:50  (54:52 ~ )
    Q:スプライト画像はページ別にIMGフォルダを作った方がいいですか?
    02:35  (56:42 ~ )
    Q:サーバー不可減のためにスプライトを利用すると思いますが、画像が巨大になって読み込みが遅くなる場合の対処法とかありますか?
    01:00  (59:17 ~ )
    Q:他に田中先生が思うcompassのここがヤバイ!というポイントがあれば教えていただきたいです。
    01:36  (1:00:17 ~ )
    Q:透明pngと非透明pngが混在するとどうなりますか?
    00:47  (1:01:53 ~ )
    Q:使うときに画像を回転させたりもできるのでしょうか?
    03:35  (1:02:40 ~ )
    Q:授業でやってるrubyのコマンドラインを使用するのと、Preprosなどのアプリでコンパイルするのと機能に違いはありますか。
      (1:06:15 ~ )