動機

Sassで変数を定義する練習のため。

使い方

1. app/assets/stylesheets/variables.scssを作成する。

$color-nobleblack:   #1d1d1f;
$color-white:        #fff;
$color-coffee_brown: #614226;
$color-thin_grey: rgba(250, 240, 230, 0.1);

2.変数を使うscssファイルで@import “color”;を記述

app/assets/stylesheets/base.scss

@import "variables";
//全体の設定
html {
  position: relative;
  min-height: 100%;
}

/* bodyからの設定 */
body {
  margin-bottom: 60px;
  border-top: 6px solid $color-coffee_brown;
  font-family: "SF Pro JP","SF Pro Text","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Helvetica Neue","Helvetica","Arial",sans-serif;
  line-height: 1.47059;
  background-color: $color-white;
  letter-spacing: -.022em;
  color: $color-nobleblack;
  overflow-x: hidden;
  font-style: normal;
}

変数の部分を変更するとインポートしている部分がすべて変わるので、便利な半面、気をつけて利用しよう！