【sass】scssの変数ファイル

開始タグ

独学でSass（scss）を学んでいるけれども、自分なりに変数ファイルをまとめたのでメモ。
scssのコンパイルはGulpで行なっています。

方法

変数ファイルは下層のscssファイルでもimportで読み込むため、ファイル名の冒頭には_をつけておきます。
ディレクトリ構造はこんな感じ。

project構造

Project
|
|--common
  |
  |--css
    |
    |--partial
       |
       |--_variables.scss

※コンパイル先のディレクトリでは、同ディレクトリ構造になるようにしています。

変数ファイルの中身はこちら。

_variables.scss

@charset "UTF-8";

// ---------------------------------------------------------------------------
//  font
// ---------------------------------------------------------------------------
$ff_notosan: 'Noto Sans CJK JP', sans-serif;

// ---------------------------------------------------------------------------
//  Responsive Style
// ---------------------------------------------------------------------------

// ----- デバイス ----- //
$pc: 950px;
$sp: 768px;
$sp480: 480px;
$sp414: 414px;
$sp375: 375px;
$sp320: 320px;

// ---------------------------------------------------------------------------
//  Basic Style
// ---------------------------------------------------------------------------

// ----- ベースの値 ----- //
$base_color: #1886cc;
$base_color02: #b5d81e;
$base_f_color: #1a1a1a;
$base_f_family: 'Noto Sans CJK JP', 'ヒラギノ角ゴ W3', 'メイリオ', Meiryo,
	'ＭＳ Ｐゴシック', 'MS PGothic', Arial, Helvetica, Verdana, sans-serif;
$base_f_size: 1.6rem;
$base_l_height: 1.7;

// ----- SP ----- //
// $base_f_color_sp: #333;

// ---------- Link ---------- //
$base_l_color: #333;
$base_opacity: 0.7;

/* ------------------------------------------------------------------------ */
/* Responsive Style
--------------------------------------------------------------------------- */
// ----- デバイス ----- //

@mixin pc {
	@media screen and (max-width: ($pc)) {
		@content;
	}
}
@mixin tab_min {
	@media screen and (min-width: ($tab)) {
		@content;
	}
}
@mixin tab_max {
	@media screen and (max-width: ($tab)) {
		@content;
	}
}
@mixin sp {
	@media screen and (max-width: ($sp)) {
		@content;
	}
}
@mixin sp480 {
	@media screen and (max-width: ($sp480)) {
		@content;
	}
}
@mixin sp414 {
	@media screen and (max-width: ($sp414)) {
		@content;
	}
}
@mixin sp375 {
	@media screen and (max-width: ($sp375)) {
		@content;
	}
}
@mixin sp320 {
	@media screen and (max-width: ($sp320)) {
		@content;
	}
}

// ---------------------------------------------------------------------------
//  Other
// ---------------------------------------------------------------------------
$wid_con01: 1200px;

// ---------------------------------------------------------------------------
//  Animation
// ---------------------------------------------------------------------------
$ani_fast: all 0.1s ease-in-out;

// ---------------------------------------------------------------------------
//  Common Original
// ---------------------------------------------------------------------------

用途に応じて編集・削除は行いますが、現状これをベースにしています。
色や行間、fontfamilyなどよく使いそうなものはまとめました。
必要であれば計算式などはここでまとめることが多いです。

閉じタグ

まだまだ物足りない感は否めないですね。
「こんな記載もしておいた方がいいよ」などございましたら、ご指摘いただけるとありがたいです！