09
scssの構成を考え中です
【作成日】 2021/08/18 20:56 【更新日】
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 します。
style.scss
@import "variables"; @import "reset"; @import "header"; @import "mask"; ... @import "drawer";
_variables.scss で指定しているもの
現状の _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;