Sassを活用する以前の基礎知識

Sassのインポート機能

Sassでは、@importを使うことで、他のファイルを読み込むことができます。 importは読み込み元のファイルのある場所から読み込みたいファイルをたどれるようにしなければなりません。

たとえば、main.scssにcomponents/common/_header.scssを読み込ませたい場合。

scss
├── base
├── components
│   ├── common
│   │   └── _header.scss
│   └── parts
├── main.css
├── main.css.map
├── main.scss
├── pages
└── utils

以下のように記述します。

@import "./components/common/header";

読み込み先ファイル名の「_」は削除します。 また、拡張子(.scss)は不要です。

コンパイルすると、以下のようにちゃんとファイルが読み込まれています。

.header {
  color: #000; }

header.scssには、先頭に「」がついています。 Sassの仕様で、「_」からはじまるscssファイルは「パーシャル」と呼ばれ、それ自体はCSSにコンパイルされない仕様になっています。

リセットCSSを使ってみる

リセットCSSとは、ブラウザごとの差異をリセットし、差分がない状態にするものです。

以下のサイトが詳しそう。 http://creive.me/archives/10438/

sanitize.cssは以下のサイトで手に入れることができます。 https://jonathantneal.github.io/sanitize.css/4.0.0/sanitize.css

このCSSを_sanitize.scssとしてファイルに書き込み、importすればOKです。