diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/scss/_component.scss | 71 | ||||
-rw-r--r-- | src/scss/_foundation.scss | 4 | ||||
-rw-r--r-- | src/scss/_function.scss | 4 | ||||
-rw-r--r-- | src/scss/_project.scss | 39 | ||||
-rw-r--r-- | src/scss/_structure.scss | 29 | ||||
-rw-r--r-- | src/scss/_variable.scss | 6 | ||||
-rw-r--r-- | src/scss/foundation/_element.scss | 53 | ||||
-rw-r--r-- | src/scss/foundation/_index.scss | 4 | ||||
-rw-r--r-- | src/scss/foundation/_stack.scss | 33 | ||||
-rw-r--r-- | src/scss/function/_calc-font-size.scss | 17 | ||||
-rw-r--r-- | src/scss/function/_calc-stack.scss | 27 | ||||
-rw-r--r-- | src/scss/function/_contrast-color.scss | 12 | ||||
-rw-r--r-- | src/scss/function/_index.scss | 4 | ||||
-rw-r--r-- | src/scss/function/_strip-unit.scss | 10 | ||||
-rw-r--r-- | src/scss/theme.scss | 13 |
15 files changed, 192 insertions, 134 deletions
diff --git a/src/scss/_component.scss b/src/scss/_component.scss index 59c9013..d6eb4bc 100644 --- a/src/scss/_component.scss +++ b/src/scss/_component.scss @@ -1,5 +1,15 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; +@use 'foundation/stack'; + main * { - @extend .first-stack; + @extend %first-stack; } main { @@ -14,18 +24,18 @@ main { + blockquote, + pre, + figure { - @extend .stack; + @extend %stack; } } li > ul, li > ol { - @extend .unset-stack; + @extend %unset-stack; } } figure > figcaption { - @extend .none-stack; + @extend %none-stack; } .table_of_contents, @@ -38,14 +48,14 @@ figure > figcaption { .button, .gist, .twitter-tweet { - @extend .stack; + @extend %stack; } .pagination { - @include grid($flex-wrap: nowrap, $justify-content: space-between); + @include flexbox-grid-mixins.grid($flex-wrap: nowrap, $justify-content: space-between); font-weight: bold; > * { - @extend .none-stack; + @extend %none-stack; } } .nav-prev {} @@ -53,9 +63,9 @@ figure > figcaption { margin-left: auto; } -@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { .pagination { - @include grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); + @include flexbox-grid-mixins.grid($flex-flow: column nowrap, $justify-content: null, $align-items: center); } .nav-next { margin-left: 0; @@ -67,7 +77,7 @@ figure > figcaption { --panel-background-color: unset; --panel-border-color: transparent; - padding: $default-layout-padding; + padding: variable.$default-layout-padding; color: var(--panel-font-color, #000); background: var(--panel-background-color, unset); border: 1px solid; @@ -80,7 +90,7 @@ figure > figcaption { } .panel-primary { - --panel-border-color: #{$default-border-color}; + --panel-border-color: #{variable.$default-border-color}; } .panel-notice { --panel-font-color: #fff; @@ -127,9 +137,9 @@ figure > figcaption { --button-font-color: #000; --button-font-hover-color: #000; - --button-background-color: #{$default-background-color}; + --button-background-color: #{variable.$default-background-color}; --button-background-hover-color: #f7f7f7; - --button-border-color: #{$default-border-color}; + --button-border-color: #{variable.$default-border-color}; color: var(--button-font-color, #000); background: var(--button-background-color, unset); @@ -137,7 +147,7 @@ figure > figcaption { border-color: var(--button-border-color, transparent); &:hover { - color:var(--button-font-hover-color, #000); + color: var(--button-font-hover-color, #000); text-decoration: none; background: var(--button-background-hover-color, unset); } @@ -160,7 +170,7 @@ figure > figcaption { .button-caution { --button-font-color: #fff; --button-font-hover-color: #fff; - --button-background-color: #f56558; + --button-background-color: #f56558; --button-background-hover-color: #d45145; --button-border-color: transparent; } @@ -174,15 +184,15 @@ figure > figcaption { .button-danger { --button-font-color: #fff; --button-font-hover-color: #fff; - --button-background-color: #ce3426; + --button-background-color: #ce3426; --button-background-hover-color: #a0281d; --button-border-color: transparent; } .notification { - padding: .2rem $default-layout-padding; + padding: .2rem variable.$default-layout-padding; text-align: center; - background: $sidebar-active-color; + background: variable.$sidebar-active-color; } .backtothetop { @@ -200,15 +210,15 @@ figure > figcaption h4 { .table_of_contents { font-size: 90%; - padding: $default-layout-padding; - border: 4px solid $default-border-color; + padding: variable.$default-layout-padding; + border: 4px solid variable.$default-border-color; ul { list-style: none; padding-left: 0; } li { - border-top: 1px solid $default-border-color; + border-top: 1px solid variable.$default-border-color; } > nav > ul > li:first-child { border-top: unset; @@ -251,14 +261,14 @@ figure > figcaption h4 { color: #70757a; } .ais-Hits-item { - @extend .stack; + @extend %stack; h3 { font-size: 140%; font-weight: normal; } p { - @extend .unset-stack; + @extend %unset-stack; color: #3C4043; } .lastmod { @@ -271,19 +281,20 @@ figure > figcaption h4 { margin-top: 1em; } .ais-Pagination-list { - @extend ul.no-style; - @include grid($flex-wrap: wrap, $justify-content: center); + list-style: none; + padding-left: 0; + @include flexbox-grid-mixins.grid($flex-wrap: wrap, $justify-content: center); } .ais-Pagination-item { padding: .6rem; } .code { - @include grid($flex-wrap: wrap); - @extend .stack; + @include flexbox-grid-mixins.grid($flex-wrap: wrap); + @extend %stack; .filename { - @include grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); font-size: 80%; color: #666; } @@ -302,10 +313,10 @@ figure > figcaption h4 { outline: none; } .code-content { - @include grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); .highlight { - @extend .none-stack; + @extend %none-stack; } } } diff --git a/src/scss/_foundation.scss b/src/scss/_foundation.scss deleted file mode 100644 index fc99f81..0000000 --- a/src/scss/_foundation.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "foundation/normalize"; -@import "foundation/reset"; -@import "foundation/element"; -@import "foundation/stack"; diff --git a/src/scss/_function.scss b/src/scss/_function.scss deleted file mode 100644 index d1bb570..0000000 --- a/src/scss/_function.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import 'function/calc-font-size'; -@import 'function/calc-stack'; -@import 'function/strip-unit'; -@import 'function/contrast-color'; diff --git a/src/scss/_project.scss b/src/scss/_project.scss index 52186c7..2c5c444 100644 --- a/src/scss/_project.scss +++ b/src/scss/_project.scss @@ -1,7 +1,16 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + header { color: var(--custom-font-color, #fff); background: var(--custom-background-color, #000); - padding: .5rem $default-layout-padding; + padding: .5rem variable.$default-layout-padding; h1 { font-size: 140%; @@ -26,7 +35,7 @@ header { .global-menu { color: var(--custom-font-color, #fff); background: var(--custom-background-color, #000); - padding: .2rem $default-layout-padding; + padding: .2rem variable.$default-layout-padding; ul { list-style: none; @@ -48,7 +57,7 @@ header { z-index: 99999; li { - padding: .2rem $default-layout-padding; + padding: .2rem variable.$default-layout-padding; background: var(--custom-background-color, #000); width: 140px; font-size: 80%; @@ -63,10 +72,10 @@ header { font-size: 80%; } li.parent:hover > ul.sub-menu { - @include grid($flex-flow: column nowrap); + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); } - @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { li { display: block; margin-right: 0; @@ -113,7 +122,7 @@ main { padding: 3rem; } -@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { main { padding: 1rem; } @@ -122,8 +131,8 @@ main { .sidebar { font-size: 90%; line-height: 1.8; - background: $sidebar-background-color; - border-right: 1px solid $sidebar-active-color; + background: variable.$sidebar-background-color; + border-right: 1px solid variable.$sidebar-active-color; ul { list-style: none; @@ -137,12 +146,12 @@ main { color: #404040; text-decoration: none; padding: .2rem 1rem; - border-left: solid 4px $sidebar-background-color; - border-bottom: solid 1px $sidebar-active-color; + border-left: solid 4px variable.$sidebar-background-color; + border-bottom: solid 1px variable.$sidebar-active-color; &:hover { color: #404040; - background: $sidebar-hover-color; + background: variable.$sidebar-hover-color; border-left: solid 4px #ccc; } } @@ -163,14 +172,14 @@ main { padding-left: 1rem + 1rem * 5; } - @media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { + @media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { nav > ul > li:first-child a { - border-top: solid 1px $sidebar-active-color; + border-top: solid 1px variable.$sidebar-active-color; } } .active > a { - background: $sidebar-active-color; + background: variable.$sidebar-active-color; border-left: solid 4px #ccc; } @@ -196,7 +205,7 @@ main { } .sidebar-footer { - padding: $default-layout-padding; + padding: variable.$default-layout-padding; } footer { diff --git a/src/scss/_structure.scss b/src/scss/_structure.scss index a2f4c84..e58fab2 100644 --- a/src/scss/_structure.scss +++ b/src/scss/_structure.scss @@ -1,3 +1,12 @@ +// Built-In Modules +@use 'sass:map'; + +// Custom Modules +@use '../../node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; + +// Included Modules +@use 'variable'; + /*-----------------------* Structure *-----------------------*/ @@ -9,40 +18,40 @@ body { .container { width: 100%; height: 100%; - @include grid($flex-flow: column nowrap); + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); margin: auto; } .content-container { - @include grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); - @include grid($justify-content: center); + @include flexbox-grid-mixins.grid-col($flex-grow: 1, $flex-shrink: 0, $flex-basis: auto); + @include flexbox-grid-mixins.grid($justify-content: center); } main { - @include grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); + @include flexbox-grid-mixins.grid-col($col: 9, $flex-shrink: 0, $max-width: 75%); &:only-child { - @include grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); + @include flexbox-grid-mixins.grid-col($col: 12, $flex-shrink: 0, $max-width: 100%); } } .sidebar { - @include grid-col($col: 3, $order: -1); + @include flexbox-grid-mixins.grid-col($col: 3, $order: -1); // position: fixed; // overflow-x: hidden; overflow-x: hidden; overflow-y: scroll; } -@media screen and (max-width: #{map-get($default-breakpoints, xs )} ) { +@media screen and (max-width: #{map.get(variable.$default-breakpoints, xs )} ) { .content-container { - @include grid($flex-flow: column nowrap); + @include flexbox-grid-mixins.grid($flex-flow: column nowrap); } main { - @include grid-col($col: none, $flex-shrink: 0, $min-width: 100%); + @include flexbox-grid-mixins.grid-col($col: none, $flex-shrink: 0, $min-width: 100%); } .sidebar { - @include grid-col($col: none, $order: 1); + @include flexbox-grid-mixins.grid-col($col: none, $order: 1); } } diff --git a/src/scss/_variable.scss b/src/scss/_variable.scss index 0e2f5a6..6c9b578 100644 --- a/src/scss/_variable.scss +++ b/src/scss/_variable.scss @@ -1,9 +1,11 @@ +@use 'function/calc-stack'; + $default-layout-width: 1024px !default; $default-font-size: 100% !default; $default-line-space: 8px !default; -$default-line-height: line-height($default-line-space, $default-font-size) !default; -$default-stack: stack($default-line-height, $default-font-size) * 4 !default; +$default-line-height: calc-stack.line-height($default-line-space, $default-font-size) !default; +$default-stack: calc-stack.stack($default-line-height, $default-font-size) * 4 !default; $default-layout-margin: 0 !default; $default-layout-padding: $default-stack !default; diff --git a/src/scss/foundation/_element.scss b/src/scss/foundation/_element.scss index 4b5b54c..3444edf 100644 --- a/src/scss/foundation/_element.scss +++ b/src/scss/foundation/_element.scss @@ -1,3 +1,6 @@ +@use '../variable'; +@use '../function/calc-stack'; + /*-----------------------* Element v1.0.0-custom *-----------------------*/ @@ -6,16 +9,16 @@ } :root { - font-size: $default-font-size; - line-height: line-height($default-line-space, $default-font-size); - color: $default-font-color; - font-family: var(--custom-font-family-base, $default-font-family); + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); + color: variable.$default-font-color; + font-family: var(--custom-font-family-base, variable.$default-font-family); font-feature-settings : 'pwid'; } body { - background-color: $default-background-color; - margin: $default-layout-margin; + background-color: variable.$default-background-color; + margin: variable.$default-layout-margin; } h1, @@ -24,9 +27,9 @@ h3, h4, h5, h6 { - font-family: var(--custom-font-family-headings, $default-font-family); + font-family: var(--custom-font-family-headings, variable.$default-font-family); font-weight: bold; - line-height: $default-line-height; + line-height: variable.$default-line-height; > small { font-size: 75%; @@ -36,37 +39,37 @@ h6 { h1 { font-size: 240%; - line-height: line-height($default-line-space, 240%); + line-height: calc-stack.line-height(variable.$default-line-space, 240%); } h2 { font-size: 200%; - line-height: line-height($default-line-space, 200%); + line-height: calc-stack.line-height(variable.$default-line-space, 200%); } h3 { font-size: 160%; - line-height: line-height($default-line-space, 160%); + line-height: calc-stack.line-height(variable.$default-line-space, 160%); } h4 { font-size: 140%; - line-height: line-height($default-line-space, 140%); + line-height: calc-stack.line-height(variable.$default-line-space, 140%); } h5 { font-size: 120%; - line-height: line-height($default-line-space, 120%); + line-height: calc-stack.line-height(variable.$default-line-space, 120%); } h6 { font-size: 100%; - line-height: line-height($default-line-space, 100%); + line-height: calc-stack.line-height(variable.$default-line-space, 100%); } a { - color: var(--custom-link-text-color, $default-link-text-color); + color: var(--custom-link-text-color, variable.$default-link-text-color); text-decoration: none; &:focus, &:active, &:hover { - color: var(--custom-link-text-hover-color, $default-link-text-hover-color); + color: var(--custom-link-text-hover-color, variable.$default-link-text-hover-color); text-decoration: underline; } } @@ -78,7 +81,7 @@ hr { } p { - font-size: $default-font-size; + font-size: variable.$default-font-size; } img { @@ -94,13 +97,13 @@ video { table { border-collapse: collapse; - border: 1px solid $default-border-color; + border: 1px solid variable.$default-border-color; width: 100%; } th, td { - border-top: 1px solid $default-border-color; - border-right: 1px solid $default-border-color; + border-top: 1px solid variable.$default-border-color; + border-right: 1px solid variable.$default-border-color; tr:nth-child(even) & { background: #f8f8f8; } @@ -140,9 +143,9 @@ dd { blockquote { color: #999; - padding: $default-layout-padding; + padding: variable.$default-layout-padding; background-color: #f4f4f4; - border-left: 4px solid $default-border-color; + border-left: 4px solid variable.$default-border-color; border-radius: .2rem; } @@ -167,7 +170,7 @@ kbd { pre { background-color: #f4f4f4; - padding: $default-layout-padding; + padding: variable.$default-layout-padding; overflow: auto; white-space: pre-wrap; border-radius: .2rem; @@ -191,6 +194,6 @@ pre { figcaption { color: #333; - font-size: $default-font-size; - line-height: line-height($default-line-space, $default-font-size); + font-size: variable.$default-font-size; + line-height: calc-stack.line-height(variable.$default-line-space, variable.$default-font-size); } diff --git a/src/scss/foundation/_index.scss b/src/scss/foundation/_index.scss new file mode 100644 index 0000000..edd558a --- /dev/null +++ b/src/scss/foundation/_index.scss @@ -0,0 +1,4 @@ +@use "normalize"; +@use "reset"; +@use "element"; +@use "stack"; diff --git a/src/scss/foundation/_stack.scss b/src/scss/foundation/_stack.scss index d7d3cb1..d9feb14 100644 --- a/src/scss/foundation/_stack.scss +++ b/src/scss/foundation/_stack.scss @@ -1,9 +1,11 @@ +@use '../variable'; + /*-----------------------* stack *-----------------------*/ :root { - --const-stack: #{$default-stack}; - --stack-top: #{$default-stack}; + --const-stack: #{variable.$default-stack}; + --stack-top: #{variable.$default-stack}; --stack-bottom: 0; --first-stack-top: 0; --first-stack-bottom: 0; @@ -11,45 +13,54 @@ --last-stack-bottom: 0; } -.first-stack { +.first-stack, +%first-stack { margin-top: var(--first-stack-top, unset); margin-bottom: var(--first-stack-bottom, unset); } -.stack { +.stack, +%stack { margin-top: var(--stack-top, unset); margin-bottom: var(--stack-bottom, unset); } -.last-stack { +.last-stack, +%last-stack { margin-top: var(--last-stack-top, unset); margin-bottom: var(--last-stack-bottom, unset); } -.stack-multi--by2 { +.stack-multi--by2, +%stack-multi--by2 { margin-top: calc(var(--first-stack-top, unset) * 2); margin-bottom: calc(var(--first-stack-bottom, unset) * 2); } -.stack-multi--by4 { +.stack-multi--by4, +%stack-multi--by4 { margin-top: calc(var(--first-stack-top, unset) * 4); margin-bottom: calc(var(--first-stack-bottom, unset) * 4); } -.stack-divi--by2 { +.stack-divi--by2, +%stack-divi--by2 { margin-top: calc(var(--first-stack-top, unset) / 2); margin-bottom: calc(var(--first-stack-bottom, unset) / 2); } -.none-stack { +.none-stack, +%none-stack { margin-top: 0; } -.unset-stack { +.unset-stack, +%unset-stack { margin-top: unset; } -.reverse-stack { +.reverse-stack +%reverse-stack { margin-top: var(--stack-bottom, unset); margin-bottom: var(--stack-top, unset); } diff --git a/src/scss/function/_calc-font-size.scss b/src/scss/function/_calc-font-size.scss index 963c762..1e54885 100644 --- a/src/scss/function/_calc-font-size.scss +++ b/src/scss/function/_calc-font-size.scss @@ -1,21 +1,24 @@ @charset "utf-8"; + +@use 'strip-unit'; + // =================================================================== // px to em // =================================================================== @function px2em($px, $base: 16) { - @return strip-unit($px) / strip-unit($base) * 1em; + @return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1em; } @function px2rem($px, $base: 16) { - @return strip-unit($px) / strip-unit($base) * 1rem; + @return strip-unit.strip-unit($px) / strip-unit.strip-unit($base) * 1rem; } // =================================================================== // percent to px // =================================================================== @function percent2px($percent, $base: 16) { - @return strip-unit($base) * (strip-unit($percent) / 100) * 1px; + @return strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100) * 1px; } // =================================================================== @@ -23,11 +26,11 @@ // =================================================================== @function percent2em($percent, $base: 16) { - @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1em; + @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1em; } @function percent2rem($percent, $base: 16) { - @return (strip-unit($base) * (strip-unit($percent) / 100)) / strip-unit($base) * 1rem; + @return (strip-unit.strip-unit($base) * (strip-unit.strip-unit($percent) / 100)) / strip-unit.strip-unit($base) * 1rem; } // =================================================================== @@ -35,9 +38,9 @@ // =================================================================== @function em2px($em, $base: 16) { - @return strip-unit($em) * strip-unit($base) * 1px; + @return strip-unit.strip-unit($em) * strip-unit.strip-unit($base) * 1px; } @function rem2px($rem, $base: 16) { - @return strip-unit($rem) * strip-unit($base) * 1px; + @return strip-unit.strip-unit($rem) * strip-unit.strip-unit($base) * 1px; } diff --git a/src/scss/function/_calc-stack.scss b/src/scss/function/_calc-stack.scss index 3647d85..cb9f05e 100644 --- a/src/scss/function/_calc-stack.scss +++ b/src/scss/function/_calc-stack.scss @@ -1,21 +1,28 @@ @charset "utf-8"; +// Built-In Modules +@use 'sass:math'; + +// Included Modules +@use 'calc-font-size'; +@use 'strip-unit'; + @function stack($line-height: 1, $font-size: 16px, $base: 16px) { - $line-height: strip-unit($line-height) * strip-unit($base); - @return $line-height / strip-unit($font-size) * 1rem; + $line-height: strip-unit.strip-unit($line-height) * strip-unit.strip-unit($base); + @return $line-height / strip-unit.strip-unit($font-size) * 1rem; } @function line-height($line-space: 4px, $font-size: 16px, $base: 16px) { - @if unit($font-size) == '%' { - $font-size: percent2px($font-size, $base); - } @else if unit($font-size) == 'em' { - $font-size: em2px($font-size, $base); - } @else if unit($font-size,) == 'rem' { - $font-size: rem2px($font-size, $base); + @if math.unit($font-size) == '%' { + $font-size: calc-font-size.percent2px($font-size, $base); + } @else if math.unit($font-size) == 'em' { + $font-size: calc-font-size.em2px($font-size, $base); + } @else if math.unit($font-size,) == 'rem' { + $font-size: calc-font-size.rem2px($font-size, $base); } - $font-size: strip-unit($font-size); - $line-space: strip-unit($line-space); + $font-size: strip-unit.strip-unit($font-size); + $line-space: strip-unit.strip-unit($line-space); @return (($line-space * 2) + $font-size) / $font-size; } diff --git a/src/scss/function/_contrast-color.scss b/src/scss/function/_contrast-color.scss index 75f341c..3867958 100644 --- a/src/scss/function/_contrast-color.scss +++ b/src/scss/function/_contrast-color.scss @@ -1,9 +1,13 @@ +@charset "utf-8"; + +// Built-In Modules +@use 'sass:math'; +@use 'sass:color'; + // =================================================================== // contrast color // =================================================================== -@charset "utf-8"; - @function contrast-color($color: null, $dark: #000, $light: #fff) { @if $color == null { @return null; @@ -13,10 +17,10 @@ $light-color-brightness: brightness($light); $dark-color-brightness: brightness($dark); - @return if(abs($color-brightness - $light-color-brightness) > abs($color-brightness - $dark-color-brightness), $light, $dark); + @return if(math.abs($color-brightness - $light-color-brightness) > math.abs($color-brightness - $dark-color-brightness), $light, $dark); } } @function brightness($color: null) { - @return ((red($color) * 299) + (green($color) * 587) + (blue($color) * 114)) / 1000; + @return ((color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114)) / 1000; } diff --git a/src/scss/function/_index.scss b/src/scss/function/_index.scss new file mode 100644 index 0000000..41e990a --- /dev/null +++ b/src/scss/function/_index.scss @@ -0,0 +1,4 @@ +@use 'calc-font-size'; +@use 'calc-stack'; +@use 'strip-unit'; +@use 'contrast-color'; diff --git a/src/scss/function/_strip-unit.scss b/src/scss/function/_strip-unit.scss index b38fdfe..99794b6 100644 --- a/src/scss/function/_strip-unit.scss +++ b/src/scss/function/_strip-unit.scss @@ -1,13 +1,17 @@ @charset "utf-8"; +// Built-In Modules +@use 'sass:meta'; +@use 'sass:math'; + @function strip-unit($value) { - @if type-of($value) == 'number' and unitless($value) == false { + @if meta.type-of($value) == 'number' and math.is-unitless($value) == false { @return $value / ($value * 0 + 1); - } @else if type-of($value) == 'number' { + } @else if meta.type-of($value) == 'number' { @return $value; } @else { @warn $value; - @warn type-of($value); + @warn meta.type-of($value); @error "error strip unit" } } diff --git a/src/scss/theme.scss b/src/scss/theme.scss index e43d9b4..25e2e04 100644 --- a/src/scss/theme.scss +++ b/src/scss/theme.scss @@ -1,9 +1,4 @@ -@import 'node_modules/flexbox-grid-mixins/sass/flexbox-grid-mixins'; -@import 'function'; - -@import 'variable'; - -@import "foundation"; -@import "structure"; -@import "component"; -@import "project"; +@use "foundation"; +@use "structure"; +@use "component"; +@use "project"; |