SCSSの初期設定用ファイルを作る

SCSSのファイルを書く際に、最初に準備しておくと作業が捗る
初期設定のファイルを作ります。

変数

_variables.scss

$container-width: 1200px !default;
 
// fonts
$font-famiry: "Noto Sans JP", "yu gothic", "hiragino sans", "hiragino kaku gothic pron", "helvetica neue", "helvetica", "arial", "meiryo", sans-serif !default;
 
$base-font-size: 16px !default;
$base-line-height: 1.625 !default;
 
// color
 
$white: #fff !default;
$black: #000 !default;
 
$text-color: $black !default;
 
// spacer
$spacer: 16px !default;

サイト内で共通して使う値を変数に格納しておくファイルです。

SCSSは値の加減乗除が簡単に行えるため、このように元の値を決めておくと
修正時に一括で変更することができて便利です。

変数名は自由に決めることができるので自分の分かりやすい名称で作成できます。

関数

_functions.scss

@function _rem($px) {
  @return ($px / $base-font-size) * 1rem;
}

関数設定用のファイルです。

関数が必要かどうかはサイトによって異なりますが、
私が常に使っているのは上にある _rem() の関数です。

この関数は、文字サイズをpxで渡すとremの値として計算して返してくれます。

scssファイル内で↓の左のように書くと、cssにビルドした際に右のようになります。

scss

p {
  font-size: _rem(16px);
}

css

p {
  font-size: 1rem;
}

よく使うスタイル

_mixins.scss

@mixin link-line-marker {
  color: $text-color;
  &::after {
    content: "> ";
  }
  &:hover {
    color: #0000ff;
  }
}

mixin を使うことで、頻繁に利用するスタイルを任意の場所で呼び出すことができます。

上のサンプルでは、a要素のスタイルを想定して設定しています。

↓のように呼び出して使います。

a {
    @include link-line-marker;
}

.btn {
    @include link-line-marker;
    color: red;
}

追加でスタイルを書くことで、mixinの値をさらに上書きすることも可能です。

スタイルシート本体

ここまでは設定しておくと便利なファイルでした。
設定が完了したら、スタイルシート本体のファイルで各設定ファイルを読み込みます。

@import "_variables";
@import "_functions";
@import "_mixins";
 
* {
  box-sizing: border-box;
}
 
html {
  font-size: $base-font-size;
}
 
body {
  width: 100%;
  margin: 0;
  background: #fff;
  font-family: $font-famiry;
  font-size: _rem($base-font-size);
  line-height: $base-line-height;
  color: $text-color;
}

設定ファイルは @import で呼び出します。
この時、基本の値を入れた _variables.scss を一番最初に読み込みます。
（元の値が無いとエラーになってしまいます）

_functions.scss と _mixins.scss はどちらが先でもOKです。

呼び出し時は「.scss」の拡張子を書いても書かなくてもOK。

設定ファイルの読み込みが書けたら、body要素までの基礎設定を書きます。
内容はお好きなように変更してOKです。

body要素では値のほとんどを _variables.scss に作った変数名で指定しています。

準備完了

後はサイトに合わせて変数や関数を書き足してスタイルを書いていきます。