開発研修 Compass

Compassを理解する

■目的

CSSフレームワーク「Compass」を利用する際に必要な基礎知識を習得します。

■課題

以下について調査し、issueに記述して下さい。

• CSSフレームワークとは
• Compassとは
• Sassとの関係
• Compassを使う利点

Compassをインストールする

■目的

Compassの開発環境を整えます。

■課題

現在使用している開発環境にて次の作業を行って下さい。

• Ruby, Sassが入っているか確認
• Compassのインストール
• バージョン確認

使用したコマンドとバージョン確認の結果をissueに記述して下さい。

Compassを使ったレイアウト

■目的

Compassを使ってレイアウトを変更します。

■課題

CSS研修第4回・Sass研修第4回で作成した課題について、以下対応してください。

• Compassプロジェクトを作成する。プロジェクト名はcompass_trainingとし、初期ファイル(ie.scss, print.scss等)が作られないようにする
• HTMLファイルをcompass-training/内に設置し、次の1文を変更する
  <link rel="stylesheet" href="style2.css" />
  ↓
  <link rel="stylesheet" href="css/style.css" />
• CSS出力先のディレクトリがcss/になるように、config.rbの設定を変更する
• ここまでの作業でディレクトリ構成は次のようになる

compass_training/
└ sass/
│ └ style.scss
└ css/ *1
　└ style.css *1
index.html
config.rb

*1・・・scssファイルをコンパイルした後に自動生成される

• HTMLファイルから次の1文を削除し、CSSリセットをCompassで行う
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
• 次のCompassライブラリを使い、CSS研修第4回のレイアウトをSassで対応する
  • box-shadow
  • inline-block
  • clearfix

PRにはscssファイルとコンパイルしたcssファイル、config.rbを含めて下さい。