Sass で使う scss の構成を考え中です。

今のところは以下のような構成で最終的に style.scss でまとめる形式で進めています。

scss/
├── _variables.scss
├── _reset.scss
├── _header.scss
├── _mask.scss
├── _drawer.scss
├── _***.scss
└── style.scss

reset より先に variables を import する

_variables.scss はいろいろな定義を書く scss です。

_reset.scss ではタグのスタイルを初期化する scss なので、_variables.scss で定義している変数を使っているので、 _reset.scss より先に _variables.scss を先に import します。

@import "variables";
@import "reset";
@import "header";
@import "mask";
...
@import "drawer";

_variables.scss で指定しているもの

現状の _variables.scss は以下の通りです。

// 
// Variables
// 


// color ===========

// Static
$static-while: rgb(255, 255, 255);
$static-black: rgb(0, 0, 0);

$static-gray-200: rgb(244, 244, 244);
$static-gray-300: rgb(234, 234, 234);
$static-gray-400: rgb(211, 211, 211);
$static-gray-500: rgb(188, 188, 188);
$static-gray-600: rgb(149, 149, 149);
$static-gray-700: rgb(116, 116, 116);
$static-gray-800: rgb(80, 80, 80);
$static-gray-900: rgb(50, 50, 50);

$static-blue-400: rgb(55, 142, 240);
$static-blue-500: rgb(38, 128, 235);
$static-blue-600: rgb(20, 115, 230);
$static-blue-700: rgb(13, 102, 208);

$static-red-400: rgb(236, 91, 98);
$static-red-500: rgb(227, 72, 80);
$static-red-600: rgb(215, 55, 63);
$static-red-700: rgb(201, 37, 45);

$static-orange-400: rgb(242, 148, 35);
$static-orange-500: rgb(230, 134, 25);
$static-orange-600: rgb(218, 123, 17);
$static-orange-700: rgb(203, 111, 16);

$static-green-400: rgb(51, 171, 132);
$static-green-500: rgb(45, 157, 120);
$static-green-600: rgb(38, 142, 108);
$static-green-700: rgb(18, 128, 92);


// Lightest -----
$lightest-gray-050: rgb(255, 255, 255);
$lightest-gray-075: rgb(255, 255, 255);
$lightest-gray-100: rgb(255, 255, 255);
$lightest-gray-200: rgb(244, 244, 244);
$lightest-gray-300: rgb(234, 234, 234);
$lightest-gray-400: rgb(211, 211, 211);
$lightest-gray-500: rgb(188, 188, 188);
$lightest-gray-600: rgb(149, 149, 149);
$lightest-gray-700: rgb(116, 116, 116);
$lightest-gray-800: rgb(80, 80, 80);
$lightest-gray-900: rgb(50, 50, 50);

$lightest-blue-400: rgb(55, 142, 240);
$lightest-blue-500: rgb(38, 128, 235);
$lightest-blue-600: rgb(20, 115, 230);
$lightest-blue-700: rgb(13, 102, 208);

$lightest-red-400: rgb(236, 91, 98);
$lightest-red-500: rgb(227, 72, 80);
$lightest-red-600: rgb(215, 55, 63);
$lightest-red-700: rgb(201, 37, 45);

$lightest-orange-400: rgb(242, 148, 35);
$lightest-orange-500: rgb(230, 134, 25);
$lightest-orange-600: rgb(218, 123, 17);
$lightest-orange-700: rgb(203, 111, 16);

$lightest-green-400: rgb(51, 171, 132);
$lightest-green-500: rgb(45, 157, 120);
$lightest-green-600: rgb(38, 142, 108);
$lightest-green-700: rgb(18, 128, 92);

$lightest-indigo-400: rgb(117, 117, 241);
$lightest-indigo-500: rgb(103, 103, 236);
$lightest-indigo-600: rgb(92, 92, 224);
$lightest-indigo-700: rgb(81, 81, 211);

$lightest-celery-400: rgb(75, 195, 95);
$lightest-celery-500: rgb(68, 181, 86);
$lightest-celery-600: rgb(61, 167, 78);
$lightest-celery-700: rgb(55, 153, 71);

$lightest-magenta-400: rgb(226, 73, 157);
$lightest-magenta-500: rgb(216, 55, 144);
$lightest-magenta-600: rgb(202, 41, 130);
$lightest-magenta-700: rgb(188, 28, 116);

$lightest-yellow-400: rgb(237, 204, 0);
$lightest-yellow-500: rgb(223, 191, 0);
$lightest-yellow-600: rgb(210, 178, 0);
$lightest-yellow-700: rgb(196, 166, 0);

$lightest-fuchsia-400: rgb(207, 62, 220);
$lightest-fuchsia-500: rgb(192, 56, 204);
$lightest-fuchsia-600: rgb(177, 48, 189);
$lightest-fuchsia-700: rgb(162, 40, 173);

$lightest-seafoam-400: rgb(32, 163, 168);
$lightest-seafoam-500: rgb(27, 149, 154);
$lightest-seafoam-600: rgb(22, 135, 140);
$lightest-seafoam-700: rgb(15, 121, 125);

$lightest-chartreuse-400: rgb(142, 222, 73);
$lightest-chartreuse-500: rgb(133, 208, 68);
$lightest-chartreuse-600: rgb(124, 195, 63);
$lightest-chartreuse-700: rgb(115, 181, 58);

$lightest-purple-400: rgb(157, 100, 225);
$lightest-purple-500: rgb(146, 86, 217);
$lightest-purple-600: rgb(134, 76, 204);
$lightest-pueple-700: rgb(122, 66, 191);

$lightest-background-color: $lightest-gray-100;
$lightest-mask-background-color: $lightest-gray-900;


// light -----
$light-gray-050: rgb(255, 255, 255);
$light-gray-075: rgb(250, 250, 250);
$light-gray-100: rgb(245, 245, 245);
$light-gray-200: rgb(234, 234, 234);
$light-gray-300: rgb(225, 225, 225);
$light-gray-400: rgb(202, 202, 202);
$light-gray-500: rgb(179, 179, 179);
$light-gray-600: rgb(142, 142, 142);
$light-gray-700: rgb(110, 110, 110);
$light-gray-800: rgb(75, 75, 75);
$light-gray-900: rgb(44, 44, 44);

$light-blue-400: rgb(38, 128, 235);
$light-blue-500: rgb(20, 115, 230);
$light-blue-600: rgb(13, 102, 208);
$light-blue-700: rgb(9, 90, 186);

$light-red-400: rgb(227, 72, 80);
$light-red-500: rgb(215, 55, 63);
$light-red-600: rgb(201, 37, 45);
$light-red-700: rgb(187, 18, 26);

$light-orange-400: rgb(230, 134, 25);
$light-orange-500: rgb(218, 123, 17);
$light-orange-600: rgb(203, 111, 16);
$light-orange-700: rgb(189, 100, 13);

$light-green-400: rgb(45, 157, 120);
$light-green-500: rgb(38, 142, 108);
$light-green-600: rgb(18, 128, 92);
$light-green-700: rgb(16, 113, 84);

$light-indigo-400: rgb(103, 103, 236);
$light-indigo-500: rgb(92, 92, 224);
$light-indigo-600: rgb(81, 81, 211);
$light-indigo-700: rgb(70, 70, 198);

$light-celery-400: rgb(68, 181, 86);
$light-celery-500: rgb(61, 167, 78);
$light-celery-600: rgb(55, 153, 71);
$light-celery-700: rgb(49, 139, 64);

$light-magenta-400: rgb(216, 55, 144);
$light-magenta-500: rgb(202, 41, 130);
$light-magenta-600: rgb(188, 28, 116);
$light-magenta-700: rgb(174, 14, 102);

$light-yellow-400: rgb(223, 191, 0);
$light-yellow-500: rgb(210, 178, 0);
$light-yellow-600: rgb(196, 166, 0);
$light-yellow-700: rgb(183, 153, 0);

$light-fuchsia-400: rgb(192, 56, 204);
$light-fuchsia-500: rgb(177, 48, 189);
$light-fuchsia-600: rgb(162, 40, 173);
$light-fuchsia-700: rgb(147, 33, 158);

$light-seafoam-400: rgb(27, 149, 154);
$light-seafoam-500: rgb(22, 135, 140);
$light-seafoam-600: rgb(15, 121, 125);
$light-seafoam-700: rgb(9, 108, 111);

$light-chartreuse-400: rgb(133, 208, 68);
$light-chartreuse-500: rgb(124, 195, 63);
$light-chartreuse-600: rgb(115, 181, 58);
$light-chartreuse-700: rgb(106, 168, 52);

$light-purple-400: rgb(146, 86, 217);
$light-purple-500: rgb(134, 76, 204);
$light-pueple-600: rgb(122, 66, 191);
$light-purple-700: rgb(111, 56, 177);

$light-background-color: $light-gray-100;
$light-mask-background-color: $light-gray-900;


// dark -----
$dark-gray-050: rgb(37, 37, 37);
$dark-gray-075: rgb(47, 47, 47);
$dark-gray-100: rgb(50, 50, 50);
$dark-gray-200: rgb(62, 62, 62);
$dark-gray-300: rgb(74, 74, 74);
$dark-gray-400: rgb(90, 90, 90);
$dark-gray-500: rgb(110, 110, 110);
$dark-gray-600: rgb(144, 144, 144);
$dark-gray-700: rgb(185, 185, 185);
$dark-gray-800: rgb(227, 227, 227);
$dark-gray-900: rgb(255, 255, 255);

$dark-blue-400: rgb(38, 128, 235);
$dark-blue-500: rgb(55, 142, 240);
$dark-blue-600: rgb(75, 156, 245);
$dark-blue-700: rgb(90, 169, 250);

$dark-red-400: rgb(227, 72, 80);
$dark-red-500: rgb(236, 91, 98);
$dark-red-600: rgb(247, 109, 116);
$dark-red-700: rgb(255, 123, 130);

$dark-orange-400: rgb(230, 134, 25);
$dark-orange-500: rgb(242, 148, 35);
$dark-orange-600: rgb(249, 164, 63);
$dark-orange-700: rgb(255, 181, 91);

$dark-green-400: rgb(45, 157, 120);
$dark-green-500: rgb(51, 171, 132);
$dark-green-600: rgb(57, 185, 144);
$dark-green-700: rgb(63, 200, 156);

$dark-indigo-400: rgb(103, 103, 236);
$dark-indigo-500: rgb(117, 117, 241);
$dark-indigo-600: rgb(130, 130, 246);
$dark-indigo-700: rgb(144, 144, 250);

$dark-celery-400: rgb(68, 181, 86);
$dark-celery-500: rgb(75, 195, 95);
$dark-celery-600: rgb(81, 210, 103);
$dark-celery-700: rgb(88, 224, 111);

$dark-magenta-400: rgb(216, 55, 144);
$dark-magenta-500: rgb(226, 73, 157);
$dark-magenta-600: rgb(236, 90, 170);
$dark-magenta-700: rgb(245, 107, 183);

$dark-yellow-400: rgb(223, 191, 0);
$dark-yellow-500: rgb(237, 204, 0);
$dark-yellow-600: rgb(250, 217, 0);
$dark-yellow-700: rgb(255, 226, 46);

$dark-fuchsia-400: rgb(192, 56, 204);
$dark-fuchsia-500: rgb(207, 62, 220);
$dark-fuchsia-600: rgb(217, 81, 229);
$dark-fuchsia-700: rgb(227, 102, 239);

$dark-seafoam-400: rgb(27, 149, 154);
$dark-seafoam-500: rgb(32, 163, 168);
$dark-seafoam-600: rgb(35, 178, 184);
$dark-seafoam-700: rgb(38, 192, 199);

$dark-chartreuse-400: rgb(133, 208, 68);
$dark-chartreuse-500: rgb(142, 222, 73);
$dark-chartreuse-600: rgb(155, 236, 84);
$dark-chartreuse-700: rgb(163, 248, 88);

$dark-purple-400: rgb(146, 86, 217);
$dark-purple-500: rgb(157, 100, 225);
$dark-pueple-600: rgb(168, 115, 233);
$dark-purple-700: rgb(180, 131, 240);

$dark-background-color: $dark-gray-100;
$dark-mask-background-color: $dark-gray-900;


// darkest -----
$darkest-gray-050: rgb(8, 8, 8);
$darkest-gray-075: rgb(26, 26, 26);
$darkest-gray-100: rgb(30, 30, 30);
$darkest-gray-200: rgb(44, 44, 44);
$darkest-gray-300: rgb(57, 57, 57);
$darkest-gray-400: rgb(73, 73, 73);
$darkest-gray-500: rgb(92, 92, 92);
$darkest-gray-600: rgb(124, 124, 124);
$darkest-gray-700: rgb(162, 162, 162);
$darkest-gray-800: rgb(200, 200, 200);
$darkest-gray-900: rgb(239, 239, 239);

$darkest-blue-400: rgb(20, 115, 230);
$darkest-blue-500: rgb(38, 128, 235);
$darkest-blue-600: rgb(55, 142, 240);
$darkest-blue-700: rgb(75, 156, 245);

$darkest-red-400: rgb(215, 55, 63);
$darkest-red-500: rgb(227, 72, 80);
$darkest-red-600: rgb(236, 91, 98);
$darkest-red-700: rgb(247, 109, 116);

$darkest-orange-400: rgb(218, 123, 17);
$darkest-orange-500: rgb(230, 134, 25);
$darkest-orange-600: rgb(242, 148, 35);
$darkest-orange-700: rgb(249, 164, 63);

$darkest-green-400: rgb(38, 142, 108);
$darkest-green-500: rgb(45, 157, 120);
$darkest-green-600: rgb(51, 171, 132);
$darkest-green-700: rgb(57, 185, 144);

$darkest-indigo-400: rgb(92, 92, 224);
$darkest-indigo-500: rgb(103, 103, 236);
$darkest-indigo-600: rgb(117, 117, 241);
$darkest-indigo-700: rgb(130, 130, 246);

$darkest-celery-400: rgb(61, 167, 78);
$darkest-celery-500: rgb(68, 181, 86);
$darkest-celery-600: rgb(75, 195, 95);
$darkest-celery-700: rgb(81, 210, 103);

$darkest-magenta-400: rgb(202, 41, 150);
$darkest-magenta-500: rgb(216, 55, 144);
$darkest-magenta-600: rgb(226, 73, 157);
$darkest-magenta-700: rgb(236, 90, 170);

$darkest-yellow-400: rgb(210, 178, 0);
$darkest-yellow-500: rgb(223, 191, 0);
$darkest-yellow-600: rgb(237, 204, 0);
$darkest-yellow-700: rgb(250, 217, 0);

$darkest-fuchsia-400: rgb(177, 48, 189);
$darkest-fuchsia-500: rgb(192, 56, 204);
$darkest-fuchsia-600: rgb(207, 62, 220);
$darkest-fuchsia-700: rgb(217, 81, 229);

$darkest-seafoam-400: rgb(22, 135, 140);
$darkest-seafoam-500: rgb(27, 149, 154);
$darkest-seafoam-600: rgb(32, 163, 168);
$darkest-seafoam-700: rgb(35, 178, 184);

$darkest-chartreuse-400: rgb(124, 195, 63);
$darkest-chartreuse-500: rgb(133, 208, 68);
$darkest-chartreuse-600: rgb(142, 222, 73);
$darkest-chartreuse-700: rgb(155, 236, 84);

$darkest-purple-400: rgb(134, 76, 204);
$darkest-purple-500: rgb(146, 86, 217);
$darkest-purple-600: rgb(157, 100, 225);
$darkest-pueple-700: rgb(168, 115, 233);

$darkest-background-color: $darkest-gray-100;
$darkest-mask-background-color: $darkest-gray-900;


// default ==========

$default-font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
$default-font-size: 16px;
$default-font-weight: 300;
$default-line-height: 1.5;

$color: (
  lightest: $lightest-gray-900,
  light: $light-gray-900,
  dark: $dark-gray-900,
  darkest: $darkest-gray-900
) !default;

$background-color: (
  lightest: $lightest-background-color,
  light: $light-background-color,
  dark: $dark-background-color,
  darkest: $darkest-background-color
) !default;


// mask ==========
$mask-background-color: (
  lightest: $lightest-mask-background-color,
  light: $light-mask-background-color,
  dark: $dark-mask-background-color,
  darkest: $darkest-mask-background-color
) !default;


// drawer ==========
$drawer-background-color: (
  lightest: $lightest-background-color,
  light: $light-background-color,
  dark: $dark-background-color,
  darkest: $darkest-background-color
) !default;

$drawer-width: (
  xs: 240px,
  sm: 240px,
  md: 240px,
  lg: 240px,
  xl: 240px,
  xxl: 240px
) !default;


// container ==========

// breakpoint -----
$breakpoint: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

// container-width -----
$container-width: (
  xs: 100%,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
) !default;

// container-width -----
$container-fluid-width: (
  xs: 100%,
  sm: 100%,
  md: 100%,
  lg: 100%,
  xl: 100%,
  xxl: 100%
) !default;


// header ===========

// header-height -----
$header-height: (
  xs: 56px,
  sm: 80px,
  md: 80px,
  lg: 80px,
  xl: 80px,
  xxl: 80px
) !default;


// logo ===========

// header-logo-width -----
$header-logo-width: (
  xs: 173px,
  sm: 247px,
  md: 247px,
  lg: 247px,
  xl: 247px,
  xxl: 247px
) !default;

// header-logo-height -----
$header-logo-height: (
  xs: map-get($header-height, 'xs'),
  sm: map-get($header-height, 'sm'),
  md: map-get($header-height, 'md'),
  lg: map-get($header-height, 'lg'),
  xl: map-get($header-height, 'xl'),
  xxl: map-get($header-height, 'xxl')
) !default;


// header-nav ===========

// header-nav-height ----- 
$header-nav-height: (
  xs: map-get($header-height, 'xs'),
  sm: map-get($header-height, 'sm'),
  md: map-get($header-height, 'md'),
  lg: map-get($header-height, 'lg'),
  xl: map-get($header-height, 'xl'),
  xxl: map-get($header-height, 'xxl')
) !default;