開発研修 Compass

Compassを理解する

■目的

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

■課題

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

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

Compassをインストールする

■目的

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

■課題

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

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

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

Compassを使ったレイアウト

■目的

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

■課題

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

• // TODO: Compassプロジェクトのディレクトリ構成考える
• HTMLファイルから次の1文を削除し、CSSリセットをCompassで行う
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
• 次のCompassライブラリを使う
  • box-shadow
  • inline-block
  • clearfix

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