ch4o5/locomotive-boilerplate
Template
1
0
Fork 0
mirror of https://github.com/locomotivemtl/locomotive-boilerplate.git synced 2026-01-15 00:55:08 +08:00
Code Issues Projects Releases Wiki Activity

Add scss-config dedicated files

Browse Source
This commit is contained in:
Lucas Vallenet
2023-12-11 11:02:54 +01:00
parent f1ebc27a69 b72fdabe23
commit 0b4c82ceda
19 changed files with 478 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
assets/styles/components/_scrollbar.scss Normal file
View File

@@ -0,0 +1,38 @@
// ==========================================================================
// Components / Scrollbar
// ==========================================================================
.c-scrollbar {
position: absolute;
right: 0;
top: 0;
width: 11px;
height: 100vh;
transform-origin: center right;
transition: transform t(normal), opacity t(normal);
opacity: 0;
&:hover {
transform: scaleX(1.45);
}
&:hover, .has-scroll-scrolling &, .has-scroll-dragging & {
opacity: 1;
}
}
.c-scrollbar_thumb {
position: absolute;
top: 0;
right: 0;
background-color: color(darkest);
opacity: 0.5;
width: 7px;
border-radius: 10px;
margin: 2px;
cursor: grab;
.has-scroll-dragging & {
cursor: grabbing;
}
}

2
assets/styles/elements/_document.scss
View File

@@ -5,7 +5,7 @@
//
// Simple page-level setup.
//
// 1. Include web fonts
// 1. Includes fonts
// 2. Ensure the page always fills at least the entire height of the viewport.
// 3. Set the default `font-size` and `line-height` for the entire project,
// sourced from our default variables.

10
assets/styles/main.scss
View File

@@ -10,7 +10,6 @@
@import "tools/maths";
@import "tools/functions";
@import "tools/mixins";
@import "tools/fonts";
// @import "tools/layout";
// @import "tools/widths";
// @import "tools/family";
@@ -18,8 +17,13 @@
// Settings
// ==========================================================================
@import "settings/config.eases";
@import "settings/config.breakpoints";
@import "settings/config.colors";
@import "settings/config.eases";
@import "settings/config.fonts";
@import "settings/config.spacers";
@import "settings/config.timings";
@import "settings/config.zindexes";
@import "settings/config";
@import "settings/config.variables";
@@ -67,5 +71,5 @@
// @import "utilities/align";
// @import "utilities/helpers";
// @import "utilities/states";
// @import "utilities/spacing";
@import "utilities/spacing";
// @import "utilities/print";

95
assets/styles/settings/_config.breakpoints.scss Normal file
View File

@@ -0,0 +1,95 @@
// ==========================================================================
// Settings / Config / Breakpoints
// ==========================================================================
// Breakpoints
// ==========================================================================
$breakpoints: (
"tiny": 500px,
"small": 700px,
"medium": 1000px,
"large": 1200px,
"big": 1400px,
"huge": 1600px,
"enormous": 1800px,
"gigantic": 2000px,
"colossal": 2400px
);
// Functions
// ==========================================================================
// Creates a min-width or max-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @param {string} $type Either "min" or "max".
// @return {string}
@function mq($breakpoint, $type: "min") {
@if not map-has-key($breakpoints, $breakpoint) {
@warn "Unknown media query breakpoint: `#{$breakpoint}`";
}
$value: map-get($breakpoints, $breakpoint);
@if ($type == "min") {
@return "(min-width: #{$value})";
}
@if ($type == "max") {
@return "(max-width: #{$value - 1px})";
}
@error "Unknown media query type: #{$type}";
}
// Creates a min-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @return {string}
@function mq-min($breakpoint) {
@return mq($breakpoint, "min");
}
// Creates a max-width media query expression.
//
// @param {string} $breakpoint The breakpoint.
// @return {string}
@function mq-max($breakpoint) {
@return mq($breakpoint, "max");
}
// Creates a min-width and max-width media query expression.
//
// @param {string} $from The min-width breakpoint.
// @param {string} $until The max-width breakpoint.
// @return {string}
@function mq-between($breakpointMin, $breakpointMax) {
@return "#{mq-min($breakpointMin)} and #{mq-max($breakpointMax)}";
}
// Legacy
// ==========================================================================
$from-tiny: map-get($breakpoints, "tiny") !default;
$to-tiny: map-get($breakpoints, "tiny") - 1 !default;
$from-small: map-get($breakpoints, "small") !default;
$to-small: map-get($breakpoints, "small") - 1 !default;
$from-medium: map-get($breakpoints, "medium") !default;
$to-medium: map-get($breakpoints, "medium") - 1 !default;
$from-large: map-get($breakpoints, "large") !default;
$to-large: map-get($breakpoints, "large") - 1 !default;
$from-big: map-get($breakpoints, "big") !default;
$to-big: map-get($breakpoints, "big") - 1 !default;
$from-huge: map-get($breakpoints, "huge") !default;
$to-huge: map-get($breakpoints, "huge") - 1 !default;
$from-enormous: map-get($breakpoints, "enormous") !default;
$to-enormous: map-get($breakpoints, "enormous") - 1 !default;
$from-gigantic: map-get($breakpoints, "gigantic") !default;
$to-gigantic: map-get($breakpoints, "gigantic") - 1 !default;
$from-colossal: map-get($breakpoints, "colossal") !default;
$to-colossal: map-get($breakpoints, "colossal") - 1 !default;

32
assets/styles/settings/_config.colors.scss
View File

@@ -3,7 +3,7 @@
// ==========================================================================
// Palette
// =============================================================================
// ==========================================================================
$colors: (
primary: #3297FD,
@@ -11,9 +11,37 @@ $colors: (
darkest: #000000,
);
// Function
// ==========================================================================
// Returns color code.
//
// ```scss
// .c-box {
// color: color(primary);
// }
// ```
//
// @param {string} $key - The color key in $colors.
// @param {number} $alpha - The alpha for the color value.
// @return {color}
@function color($key, $alpha: 1) {
@if not map-has-key($colors, $key) {
@error "Unknown '#{$key}' in $colors.";
}
@if($alpha < 0 or $alpha > 1) {
@error "Alpha '#{$alpha}' must be in range [0, 1].";
}
$color: map-get($colors, $key);
@return rgba($color, $alpha);
}
// Specifics
// =============================================================================
// ==========================================================================
// Link
$color-link: color(primary);

102
assets/styles/settings/_config.eases.scss
View File

@@ -2,47 +2,77 @@
// Settings / Config / Eases
// ==========================================================================
// Power 1
$ease-power1-in: cubic-bezier(0.550, 0.085, 0.680, 0.530);
$ease-power1-out: cubic-bezier(0.250, 0.460, 0.450, 0.940);
$ease-power1-in-out: cubic-bezier(0.455, 0.030, 0.515, 0.955);
// Eases
// ==========================================================================
// Power 2
$ease-power2-in: cubic-bezier(0.550, 0.055, 0.675, 0.190);
$ease-power2-out: cubic-bezier(0.215, 0.610, 0.355, 1.000);
$ease-power2-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);
$eases: (
// Power 1
"power1.in": cubic-bezier(0.550, 0.085, 0.680, 0.530),
"power1.out": cubic-bezier(0.250, 0.460, 0.450, 0.940),
"power1.inOut": cubic-bezier(0.455, 0.030, 0.515, 0.955),
// Power 3
$ease-power3-in: cubic-bezier(0.895, 0.030, 0.685, 0.220);
$ease-power3-out: cubic-bezier(0.165, 0.840, 0.440, 1.000);
$ease-power3-in-out: cubic-bezier(0.770, 0.000, 0.175, 1.000);
// Power 2
"power2.in": cubic-bezier(0.550, 0.055, 0.675, 0.190),
"power2.out": cubic-bezier(0.215, 0.610, 0.355, 1.000),
"power2.inOut": cubic-bezier(0.645, 0.045, 0.355, 1.000),
// Power 3
$ease-power4-in: cubic-bezier(0.755, 0.050, 0.855, 0.060);
$ease-power4-out: cubic-bezier(0.230, 1.000, 0.320, 1.000);
$ease-power4-in-out: cubic-bezier(0.860, 0.000, 0.070, 1.000);
// Power 3
"power3.in": cubic-bezier(0.895, 0.030, 0.685, 0.220),
"power3.out": cubic-bezier(0.165, 0.840, 0.440, 1.000),
"power3.inOut": cubic-bezier(0.770, 0.000, 0.175, 1.000),
// Expo
$ease-expo-in: cubic-bezier(0.950, 0.050, 0.795, 0.035);
$ease-expo-out: cubic-bezier(0.190, 1.000, 0.220, 1.000);
$ease-expo-in-out: cubic-bezier(1.000, 0.000, 0.000, 1.000);
// Power 4
"power4.in": cubic-bezier(0.755, 0.050, 0.855, 0.060),
"power4.out": cubic-bezier(0.230, 1.000, 0.320, 1.000),
"power4.inOut": cubic-bezier(0.860, 0.000, 0.070, 1.000),
// Back
$ease-back-in: cubic-bezier(0.600, -0.280, 0.735, 0.045);
$ease-back-out: cubic-bezier(0.175, 00.885, 0.320, 1.275);
$ease-back-in-out: cubic-bezier(0.680, -0.550, 0.265, 1.550);
// Expo
"expo.in": cubic-bezier(0.950, 0.050, 0.795, 0.035),
"expo.out": cubic-bezier(0.190, 1.000, 0.220, 1.000),
"expo.inOut": cubic-bezier(1.000, 0.000, 0.000, 1.000),
// Sine
$ease-sine-in: cubic-bezier(0.470, 0.000, 0.745, 0.715);
$ease-sine-out: cubic-bezier(0.390, 0.575, 0.565, 1.000);
$ease-sine-in-out: cubic-bezier(0.445, 0.050, 0.550, 0.950);
// Back
"back.in": cubic-bezier(0.600, -0.280, 0.735, 0.045),
"back.out": cubic-bezier(0.175, 00.885, 0.320, 1.275),
"back.inOut": cubic-bezier(0.680, -0.550, 0.265, 1.550),
// Circ
$ease-circ-in: cubic-bezier(0.600, 0.040, 0.980, 0.335);
$ease-circ-out: cubic-bezier(0.075, 0.820, 0.165, 1.000);
$ease-circ-in-out: cubic-bezier(0.785, 0.135, 0.150, 0.860);
// Sine
"sine.in": cubic-bezier(0.470, 0.000, 0.745, 0.715),
"sine.out": cubic-bezier(0.390, 0.575, 0.565, 1.000),
"sine.inOut": cubic-bezier(0.445, 0.050, 0.550, 0.950),
// Misc
$ease-bounce: cubic-bezier(0.17, 0.67, 0.3, 1.33);
$ease-slow-out: cubic-bezier(.04,1.15,0.4,.99);
$ease-smooth: cubic-bezier(0.380, 0.005, 0.215, 1);
// Circ
"circ.in": cubic-bezier(0.600, 0.040, 0.980, 0.335),
"circ.out": cubic-bezier(0.075, 0.820, 0.165, 1.000),
"circ.inOut": cubic-bezier(0.785, 0.135, 0.150, 0.860),
// Misc
"bounce": cubic-bezier(0.17, 0.67, 0.3, 1.33),
"slow.out": cubic-bezier(.04,1.15,0.4,.99),
"smooth": cubic-bezier(0.380, 0.005, 0.215, 1),
);
// Default value for ease()
$ease-default: "power2.out" !default;
// Function
// ==========================================================================
// Returns ease curve.
//
// ```scss
// .c-box {
// transition-timing-function: ease("power2.out");
// }
// ```
//
// @param {string} $key - The ease key in $eases.
// @return {easing-function}
@function ease($key: $ease-default) {
@if not map-has-key($eases, $key) {
@error "Unknown '#{$key}' in $eases.";
}
@return map-get($eases, $key);
}

39
assets/styles/tools/_fonts.scss → assets/styles/settings/_config.fonts.scss
View File

@@ -1,5 +1,42 @@
// ==========================================================================
// Tools / Font Faces
// Settings / Config / Breakpoints
// ==========================================================================
// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
// ==========================================================================
$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
// Typefaces
// ==========================================================================
// List of custom font faces as tuples.
//
// ```
// <font-name> <font-file-basename> <font-weight> <font-style>
// ```
$font-faces: (
("Source Sans", "SourceSans3-Bold", 700, normal),
("Source Sans", "SourceSans3-BoldIt", 700, italic),
("Source Sans", "SourceSans3-Regular", 400, normal),
("Source Sans", "SourceSans3-RegularIt", 400, italic),
);
// Map of font families.
//
// ```
// <font-id>: (<font-name>, <font-fallbacks>)
// ```
$font-families: (
sans: join("Source Sans", $font-fallback-sans, $separator: comma),
);
// Font directory
$font-dir: "../fonts/";
// Functions
// ==========================================================================
// Imports the custom font.

72
assets/styles/settings/_config.scss
View File

@@ -11,43 +11,11 @@ $context: frontend !default;
// Path is relative to the stylesheets directory.
$assets-path: "../" !default;
// Typefaces
// =============================================================================
// Font directory
$font-dir: "../fonts/";
// Font fallbacks (retrieved from systemfontstack.com on 2022-05-31)
$font-fallback-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
$font-fallback-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
$font-fallback-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
// Map of font families.
//
// ```
// <font-id>: (<font-name>, <font-fallbacks>)
// ```
$font-families: (
sans: join("Source Sans", $font-fallback-sans, $separator: comma),
);
// List of custom font faces as tuples.
//
// ```
// <font-name> <font-file-basename> <font-weight> <font-style>
// ```
$font-faces: (
("Source Sans", "SourceSans3-Bold", 700, normal),
("Source Sans", "SourceSans3-BoldIt", 700, italic),
("Source Sans", "SourceSans3-Regular", 400, normal),
("Source Sans", "SourceSans3-RegularIt", 400, italic),
);
// Typography
// =============================================================================
// Base
$font-size: 16px;
$font-size: 16px;
$line-height: math.div(24px, $font-size);
$font-color: color(darkest);
@@ -57,11 +25,10 @@ $font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;
// Transitions
// Transition defaults
// =============================================================================
$speed: 0.3s;
$easing: $ease-power2-out;
$speed: t(normal);
$easing: ease("power2.out");
// Spacing Units
// =============================================================================
@@ -75,34 +42,3 @@ $padding: $unit;
// Grid
// ==========================================================================
$base-column-nb: 12;
// Breakpoints
// =============================================================================
$from-tiny: 500px !default;
$to-tiny: $from-tiny - 1 !default;
$from-small: 700px !default;
$to-small: $from-small - 1 !default;
$from-medium: 1000px !default;
$to-medium: $from-medium - 1 !default;
$from-large: 1200px !default;
$to-large: $from-large - 1 !default;
$from-big: 1400px !default;
$to-big: $from-big - 1 !default;
$from-huge: 1600px !default;
$to-huge: $from-huge - 1 !default;
$from-enormous: 1800px !default;
$to-enormous: $from-enormous - 1 !default;
$from-gigantic: 2000px !default;
$to-gigantic: $from-gigantic - 1 !default;
$from-colossal: 2400px !default;
$to-colossal: $from-colossal - 1 !default;
// Master z-indexe
// =============================================================================
$z-indexes: (
"header": 200,
"above": 1,
"below": -1
);

40
assets/styles/settings/_config.spacers.scss Normal file
View File

@@ -0,0 +1,40 @@
// ==========================================================================
// Settings / Config / Spacers
// ==========================================================================
// Spacers
// ==========================================================================
$spacers: (
'gutter': var(--grid-gutter),
'xs': #{vh(5)},
'sm': #{vh(7.5)},
'md': #{vh(10)},
'lg': #{vh(12.5)},
'xl': #{vh(15)},
);
// Function
// ==========================================================================
// Returns spacer.
//
// ```scss
// .c-box {
// margin-top: spacer(gutter);
// }
// ```
//
// @param {string} $key - The spacer key in $spacers.
// @param {number} $multiplier - The multiplier of the spacer value.
// @return {size}
@function spacer($spacer: $spacer-default, $multiplier: 1) {
@if not map-has-key($spacers, $spacer) {
@error "Unknown master spacer: #{$spacer}";
}
$index: map-get($spacers, $spacer);
@return calc(#{$index} * #{$multiplier});
}

41
assets/styles/settings/_config.timings.scss Normal file
View File

@@ -0,0 +1,41 @@
// ==========================================================================
// Settings / Config / Timings
// ==========================================================================
// Timings
// ==========================================================================
$timings: (
fastest: 0.1s,
faster: 0.15s,
fast: 0.25s,
normal: 0.5s,
slow: 0.75s,
slower: 1s,
slowest: 2s,
);
// Default timing for t()
$timing-default: "normal" !default;
// Function
// ==========================================================================
// Returns timing.
//
// ```scss
// .c-box {
// transition-duration: t(slow);
// }
// ```
//
// @param {string} $key - The timing key in $timings.
// @return {duration}
@function t($key: $timing-default) {
@if not map-has-key($timings, $key) {
@error "Unknown '#{$key}' in $timings.";
}
@return map-get($timings, $key);
}

1
assets/styles/settings/_config.variables.scss
View File

@@ -7,7 +7,6 @@
// Grid
--grid-columns: 4;
--grid-gutter: #{rem(10px)};
--grid-gutter-half: calc(0.5 * var(--grid-gutter));
--grid-margin: #{rem(10px)};
// Container

44
assets/styles/settings/_config.zindexes.scss Normal file
View File

@@ -0,0 +1,44 @@
// ==========================================================================
// Settings / Config / Z-indexes
// ==========================================================================
// Timings
// ==========================================================================
$z-indexes: (
"header": 200,
"above": 1,
"default": 0,
"below": -1
);
// Default z-index for z()
$z-index-default: "above" !default;
// Function
// ==========================================================================
// Retrieves the z-index from the {@see $layers master list}.
//
// @link on http://css-tricks.com/handling-z-index/
//
// @param {string} $layer The name of the z-index.
// @param {number} $modifier A positive or negative modifier to apply
// to the returned z-index value.
// @throw Error if the $layer does not exist.
// @throw Warning if the $modifier might overlap another master z-index.
// @return {number} The computed z-index of $layer and $modifier.
@function z($layer: $z-index-default, $modifier: 0) {
@if not map-has-key($z-indexes, $layer) {
@error "Unknown master z-index layer: #{$layer}";
}
@if ($modifier >= 50 or $modifier <= -50) {
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
}
$index: map-get($z-indexes, $layer);
@return $index + $modifier;
}

43
assets/styles/tools/_functions.scss
View File

@@ -48,31 +48,6 @@
@return math.div($size, $base) * 1rem;
}
// Retrieves the z-index from the {@see $layers master list}.
//
// @link on http://css-tricks.com/handling-z-index/
//
// @param {string} $layer The name of the z-index.
// @param {number} $modifier A positive or negative modifier to apply
// to the returned z-index value.
// @throw Error if the $layer does not exist.
// @throw Warning if the $modifier might overlap another master z-index.
// @return {number} The computed z-index of $layer and $modifier.
@function z($layer, $modifier: 0) {
@if not map-has-key($z-indexes, $layer) {
@error "Unknown master z-index layer: #{$layer}";
}
@if ($modifier >= 50 or $modifier <= -50) {
@warn "Modifier may overlap the another master z-index layer: #{$modifier}";
}
$index: map-get($z-indexes, $layer);
@return $index + $modifier;
}
// Converts a number to a percentage.
//
// @alias percentage()
@@ -207,21 +182,3 @@ $context: 'frontend' !default;
$delta: math.div($max-size, $breakpoint);
@return clamp($min-size, calc(#{strip-unit($delta)} * #{vw(100)}), $max-size);
}
// Returns color code.
//
// ```scss
// .c-box {
// width: color(primary);
// }
// ```
//
// @param {string} $key - The color key in $colors.
// @return {color}
@function color($key) {
@if not map-has-key($colors, $key) {
@error "Unknown '#{$key}' in $colors.";
}
@return map-get($colors, $key);
}

34
assets/styles/utilities/_grid-column.scss
View File

@@ -11,29 +11,31 @@
$colsMax: $base-column-nb + 1;
$breakpoints: (
"null" null,
"from-tiny" $from-tiny,
"from-small" $from-small,
"from-medium" $from-medium,
"from-large" $from-large,
"from-big" $from-big
) !default;
@each $breakpoint, $mediaquery in $breakpoints {
@for $fromIndex from 1 through $colsMax {
@for $toIndex from 1 through $colsMax {
@if $mediaquery == null {
// Columns without media query
@if $breakpoint == "tiny" {
.u-gc-#{$fromIndex}\/#{$toIndex} {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
} @else {
.u-gc-#{$fromIndex}\/#{$toIndex}\@#{$breakpoint} {
@media (min-width: #{$mediaquery}) {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
}
// Columns min-width breakpoints `@from-*`
.u-gc-#{$fromIndex}\/#{$toIndex}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
}
// Columns max-width breakpoints @to-*`
.u-gc-#{$fromIndex}\/#{$toIndex}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
--gc-start: #{$fromIndex};
--gc-end: #{$toIndex};
}
}
}

56
assets/styles/utilities/_spacing.scss
View File

@@ -26,8 +26,8 @@ $spacing-directions: (
'-right': '-right',
'-bottom': '-bottom',
'-left': '-left',
'-horizontal': '-left' '-right',
'-vertical': '-top' '-bottom',
'-x': '-left' '-right',
'-y': '-top' '-bottom',
) !default;
$spacing-properties: (
@@ -35,19 +35,47 @@ $spacing-properties: (
'margin': 'margin',
) !default;
$spacing-sizes: (
null: $unit,
'-double': $unit * 2,
'-small': $unit-small,
'-none': 0px
) !default;
$spacing-sizes: join($spacers, (
null: var(--grid-gutter),
'none': 0
));
@each $property-namespace, $property in $spacing-properties {
@each $direction-namespace, $direction-rules in $spacing-directions {
@each $size-namespace, $size in $spacing-sizes {
.u-#{$property-namespace}#{$direction-namespace}#{$size-namespace} {
@each $direction in $direction-rules {
#{$property}#{$direction}: rem($size) !important;
@each $breakpoint, $mediaquery in $breakpoints {
@each $property-namespace, $property in $spacing-properties {
@each $direction-namespace, $directions in $spacing-directions {
@each $size-namespace, $size in $spacing-sizes {
// Prepend "-" to spacing sizes if not null
$size-namespace: if($size-namespace != null, "-" + $size-namespace, $size-namespace);
// Base class
$base-class: ".u-" + #{$property-namespace}#{$direction-namespace}#{$size-namespace};
// Spacer without media query
@if $breakpoint == "tiny" {
#{$base-class} {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer min-width breakpoints `@from-*`
#{$base-class}\@from-#{$breakpoint} {
@media #{mq-min($breakpoint)} {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}
}
// Spacer max-width breakpoints @to-*`
#{$base-class}\@to-#{$breakpoint} {
@media #{mq-max($breakpoint)} {
@each $direction in $directions {
#{$property}#{$direction}: $size !important;
}
}
}
}
}