インターポレーションを使ってみよう。

1. 「chapter02」 › 「interpolate」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
2. 下記のsassのコードを追加する

$file-path: '../assets/images/';
$font-size: 1em;
$line-height: 1.5;
$selector: '.card';

body {
  background-image: url(#{$file-path}bg.png);
  font: #{$font-size}/#{$line-height} sans-serif;
}

#{$selector} {
  display: block;
}

3. 上書き保存
4. 「chapter02」 › 「interpolate」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認

body {
  background-image: url(../assets/images/bg.png);
  font: 1em/1.5 sans-serif;
}

.card {
  display: block;
}

@import インポートするファイルパス;

先頭の「_」と拡張子は省略できる

Sassファイルをインポートしてみよう。

1. 「chapter02」 › 「import」 › 「_sass」 › 「inc」フォルダ内に「_settings.scss」ファイルを作成する
2. 下記のsassのコードをコピペする

// -----------------------------------
//  Layout Settings
//------------------------------------

// Contentの幅
$content-width: 1200px;


//====================================
//  Color Setings
//====================================

// メインカラー
$main-color: #9DBF4A;

// サブカラー
$sub-color: #2C2C31;

// テキストの色
$text-color: #212121;

3. 「chapter02」 › 「import」 › 「_sass」フォルダ内にある「common.scss」ファイルを開く
4. 下記のsassのコードを追加する

@import 'inc/settings';

/* =================================
  Layout
================================= */
@import 'layout/centring';
@import 'layout/header';
@import 'layout/main';
@import 'layout/footer';

3. 上書き保存
4. 「chapter02」 › 「import」 › 「css」フォルダ内に下記の「common.css」ファイルが出来上がっていることを確認

/* =================================
  Layout
================================= */
/*
  Centring
---------------------*/
.l-container {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto;
}

/*
  Header
---------------------*/
.l-header {
  padding: .75em 0;
  overflow: hidden;
  background-color: #9DBF4A;
}

.l-header__title {
  float: left;
}

.l-header__nav {
  float: right;
}

/*
  Header
---------------------*/
.l-main {
  clear: both;
}

/*
  Footer
---------------------*/
.l-footer {
  padding: 1.5em 0;
  background-color: #2C2C31;
}

.l-footer__nav {
  font-size: 0;
}

.l-footer__nav__item {
  display: inline-block;
  font-size: medium;
}

.l-footer__siteinfo {
  padding: 1em 0;
}

Sassファイルの分割例

[_sass]
  |
  |-- [Foundation] （基盤用）
  |    |-- _reset.scss （ブラウザCSSのリセット）
  |    |-- _base.scss （サイト共通のベース設定）
  |
  |-- [Layout] （レイアウト用）
  |    |-- _centering.scss （「.l-container」など）
  |    |-- _header.scss （「.l-header」など）
  |    |-- _main.scss （「.l-main」など）
  |    |-- _footer.scss （「.l-footer」など）
  |
  |-- [Object] （パーツ用）
  |    |-- [Component] （何度も使うコンポーネント用）
  |    |     |-- _grid.scss （「.c-grid」など）
  |    |     |-- _card.scss （「.c-card」など）
  |    |     |-- _media.scss （「.c-media」など）
  |    |     |-- _button.scss （「.c-button」など）
  |    |
  |    |-- [Project] （プロジェクト用）
  |    |     |-- _logo.scss （「.p-logo」など）
  |    |     |-- _profile.scss （「.p-profile」など）
  |    |
  |    |-- [Utility] （調整用）
  |          |-- _margin.scss （「.u-mt」など）
  |          |-- _padding.scss （「.u-pt」など）
  |
  |-- [inc] （読み込み用）
  |    |-- _settings.scss （変数定義用）
  |
  |-- common.scss （インポート元ファイル）
  

• 色コードなどは変数で管理すると便利
• 演算で数値を計算できる
• Sassファイル分割し@importで管理すると便利