@charset "UTF-8"; /*! Global Styles */ /*==================================== *. Global ---------------------------------- Structure ---------------------------------- - 1. Base Import - 2. Global Import ---------------------------------- Introduction ---------------------------------- ---------------------------------- Constitution ---------------------------------- ---------------------------------- Change Log ---------------------------------- - 2020/07/20 Founding ====================================*/ /*==================================== - 1. Base Import -------------------------------------- まずはbasic-styleと 君が作るブランクの - variables - function - mixin を読み込むぞ ====================================*/ /*==================================== 0. Base Function ---------------------------------- Structure ---------------------------------- - 1. Map Deep Get - 2. REM Calculator - 3. Line Height Calculator - 4. Strip Unit - 5. Tint & Shade Color ---------------------------------- Introduction ---------------------------------- ---------------------------------- Constitution ---------------------------------- ---------------------------------- Change Log ---------------------------------- - 2020/07/20 Founding ====================================*/ /*==================================== - 1. Map Deep Get -------------------------------------- ネストされたmapを取得できる map-deep-get() ====================================*/ /*==================================== - 2. REM Calculator -------------------------------------- px -> rem の計算機 $basic-font-size必須 rem-calc(number); ====================================*/ /*pxからrem求めたい時 *{ font-size: rem-calc(14); } *{ font-size: 0.875rem; } */ /* *{ font-size: px-rem-calc(0.875); } *{ font-size: 14px; } */ /* *{ font-size: em-calc(14); } *{ font-size: 0.875em; } *{ font-size: em-calc(16,14); } *{ font-size: 1.125em; } */ /* *{ width: basic-size(2); } *{ width: 32px; } */ /*==================================== - 3. Line Height Calculator -------------------------------------- line-height の計算機 px からで 比率計算できる $basic-font-size必須 line-height-cal(line-height, font-size); ====================================*/ /* *{ line-height: line-height-calc(32); } *{ line-height: 2.0 } */ /*==================================== - 4. Strip Unit -------------------------------------- 単位がある数値を数値だけにする ====================================*/ /*==================================== - 5. Tint & Shade Color -------------------------------------- 色に白や黒を混ぜる $theme-color-interval は混ぜる割合 $color-100: tint-color($color, 8); $color-200: tint-color($color, 6); $color-300: tint-color($color, 4); $color-400: tint-color($color, 2); $color-500: $color; $color-600: shade-color($color, 2); $color-700: shade-color($color, 4); $color-800: shade-color($color, 6); $color-900: shade-color($color, 8); ====================================*/ /*頭に_をつけると読み込まない "grobal.scss"で＠import*/ /*==================================== 01. Basic Variables ---------------------------------- Structure ---------------------------------- - 1. Bacic Size - 2. Breakpoints - 3. Colors ---------------------------------- Introduction ---------------------------------- ---------------------------------- Constitution ---------------------------------- child of ---------------------------------- Change Log ---------------------------------- - 2020/07/20 Founding ====================================*/ /*==================================== - 1. Bacic Font Size -------------------------------------- font-size と　line-height　共に 単位省略(px)して書いてね 両方ともに設定されるよ ここでのline-heightは 小さめにしとくといいと思う ここでのline-heightは 小さめにしとくといいと思う いろんなところで使う $basic-design-size 基本的に16かな ====================================*/ /* Font Size (px) */ /* Line Height (px) */ /* Design Size (px) */ /*==================================== - 2. Breakpoints -------------------------------------- ====================================*/ /* h1{ font-size: 1em; @include media-min() { font-size: 2em; } @include media-min(massive) { font-size: 3em; } @include media-min(9999px) { font-size: 4em; } } */ /*------------------------------------ $breakpoints(map)を 取得するための @function ------------------------------------*/ /*==================================== - 3. Colors -------------------------------------- ====================================*/ /* $color-primary */ /* $color-secondary */ /* $color-tertiary */ /* $color-quaternary */ /* $color-quinary */ /*==================================== 0. Base MIXINS ---------------------------------- Structure ---------------------------------- - 1. Font size - 2. Media Queries width 2.1 Media Queries width base 2.2 Media Queries min 2.3 Media Queries max 2.4 Media Queries Only - 3. Media Dark Mode - 4. Media Portrait - 5. Media Landscape - 6. Button Reset - 7. Size - 8. Aspect Ratio - 9. Background Cover - 10. Padding & Margin ---------------------------------- Introduction ---------------------------------- ---------------------------------- Constitution ---------------------------------- ---------------------------------- Change Log ---------------------------------- - 2020/07/20 Founding ====================================*/ /*==================================== - 1. Font size -------------------------------------- font-size のem line-heightを求めるmixin 基本数は$basic_font_sizeで設定 @include font-size(16); output: font-size: 1em; @include font-size(16, 18); output: font-size: 1em; line-height: 1.125; ====================================*/ /*==================================== - 2. Media Queries width -------------------------------------- @include media-min(999px) { *** } output: @media (min-width: 999px) { *** } @include media-max(999px) { *** } output: @media (max-width: 999px) { *** } @include media-only(999px, 9999px) { *** } output: @media (min-width: 999px) and (max-width: 9999px) { *** } ====================================*/ /*------------------------------------ 2.1 Media Queries width base ------------------------------------*/ /*------------------------------------ 2.2 Media Queries min ------------------------------------*/ /*------------------------------------ 2.3 Media Queries max ------------------------------------*/ /*------------------------------------ 2.4 Media Queries Only ------------------------------------*/ /*------------------------------------ 2.5 Media Queries Mobile min ------------------------------------*/ /*------------------------------------ 2.5 Media Queries TABLET min ------------------------------------*/ /*------------------------------------ 2.5 Media Queries PC min ------------------------------------*/ /*==================================== - 3. Media Dark Mode -------------------------------------- ダークモード用 @include media-dark { *** } output: @media (prefers-color-scheme: dark) { *** } ====================================*/ /*==================================== - 4. Media Portrait -------------------------------------- 画面が縦長用 @include media-portrait { *** } output: @media (orientation: portrait) { *** } ====================================*/ /*==================================== - 5. Media Landscape -------------------------------------- 画面が横長用 @include media-landscape { *** } output: @media (orientation: landscape) { *** } ====================================*/ /*==================================== - 6. Button Reset --------------------------------------