-
-
Save hoseferrera/70c3c303ebdf9d97b6dca1634dfc67c7 to your computer and use it in GitHub Desktop.
Revisions
-
lukaskleinschmidt revised this gist
Jun 10, 2020 . 1 changed file with 23 additions and 5 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -10,19 +10,31 @@ $breakpoints: () !default /// The position of the breakpoint to the selector. /// /// @type String $breakpoint-position: 'before' !default /// The string used to attach breakpoints. /// /// @type String $breakpoint-glue: '\\:' !default /// The position of the variant to the selector. /// /// @type String $variant-position: 'before' !default /// The string used to attach variants. /// /// @type String $variant-glue: '\\:' !default /// The string used to attach options. /// /// @type String $option-glue: '-' !default @@ -59,11 +71,17 @@ $option-glue: '-' !default // Add the variant to the current selector @if $variant @if $variant-position == 'after' $selector: '#{$selector}#{$variant-glue}#{$variant}' @else $selector: '#{$variant}#{$variant-glue}#{$selector}' // Add the breakpoint to the current selector @if $breakpoint @if $breakpoint-position == 'after' $selector: '#{$selector}#{$breakpoint-glue}#{$breakpoint}' @else $selector: '#{$breakpoint}#{$breakpoint-glue}#{$selector}' // Convert back to a class @if $selector -
May 27, 2020 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -41,7 +41,7 @@ $text: ( ); .text { @include options($text, 'responsive') using ($value) { text-align: $value; } } @@ -81,7 +81,7 @@ $margin: map.merge(( 'auto': auto ), $spacing); @include variants('responsive') using ($props...) { // ██████╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ ██████╗ // ██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║████╗ ██║██╔════╝ -
May 27, 2020 . No changes.There are no files selected for viewing
-
May 27, 2020 . 3 changed files with 329 additions and 358 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -33,28 +33,28 @@ // ██║ ███████╗██╔╝ ██╗ ██║ // ╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ $text: ( 'left': left, 'right': right, 'center': center, 'justify': justify, ); .text { @include options($text,'responsive') using ($value) { text-align: $value; } } // ███████╗██████╗ █████╗ ██████╗██╗███╗ ██╗ ██████╗ // ██╔════╝██╔══██╗██╔══██╗██╔════╝██║████╗ ██║██╔════╝ // ███████╗██████╔╝███████║██║ ██║██╔██╗ ██║██║ ███╗ // ╚════██║██╔═══╝ ██╔══██║██║ ██║██║╚██╗██║██║ ██║ // ███████║██║ ██║ ██║╚██████╗██║██║ ╚████║╚██████╔╝ // ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝╚═╝ ╚═══╝ ╚═════╝ $spacing: ( 'px': 1px, '0': 0, '1': .25rem, @@ -76,166 +76,188 @@ $options: ( '64': 16rem, ); // Add auto to the positive margin classes $margin: map.merge(( 'auto': auto ), $spacing); @include variants($spacing) using ($props...) { // ██████╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ ██████╗ // ██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║████╗ ██║██╔════╝ // ██████╔╝███████║██║ ██║██║ ██║██║██╔██╗ ██║██║ ███╗ // ██╔═══╝ ██╔══██║██║ ██║██║ ██║██║██║╚██╗██║██║ ██║ // ██║ ██║ ██║██████╔╝██████╔╝██║██║ ╚████║╚██████╔╝ // ╚═╝ ╚═╝ ╚═╝╚═════╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ .p { @include options($spacing, $props...) using ($value) { padding: $value; } } .px { @include options($spacing, $props...) using ($value) { padding-right: $value; padding-left: $value; } } .py { @include options($spacing, $props...) using ($value) { padding-bottom: $value; padding-top: $value; } } .pt { @include options($spacing, $props...) using ($value) { padding-top: $value; } } .pr { @include options($spacing, $props...) using ($value) { padding-right: $value; } } .pb { @include options($spacing, $props...) using ($value) { padding-bottom: $value; } } .pl { @include options($spacing, $props...) using ($value) { padding-left: $value; } } // ███╗ ███╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ // ████╗ ████║██╔══██╗██╔══██╗██╔════╝ ██║████╗ ██║ // ██╔████╔██║███████║██████╔╝██║ ███╗██║██╔██╗ ██║ // ██║╚██╔╝██║██╔══██║██╔══██╗██║ ██║██║██║╚██╗██║ // ██║ ╚═╝ ██║██║ ██║██║ ██║╚██████╔╝██║██║ ╚████║ // ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝ .m { @include options($margin, $props...) using ($value) { margin: $value; } } .mx { @include options($margin, $props...) using ($value) { margin-right: $value; margin-left: $value; } } .my { @include options($margin, $props...) using ($value) { margin-bottom: $value; margin-top: $value; } } .mt { @include options($margin, $props...) using ($value) { margin-top: $value; } } .mr { @include options($margin, $props...) using ($value) { margin-right: $value; } } .mb { @include options($margin, $props...) using ($value) { margin-bottom: $value; } } .-ml { @include options($margin, $props...) using ($value) { margin-left: $value; } } // ███╗ ███╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ // ████╗ ████║██╔══██╗██╔══██╗██╔════╝ ██║████╗ ██║ // █████╗██╔████╔██║███████║██████╔╝██║ ███╗██║██╔██╗ ██║ // ╚════╝██║╚██╔╝██║██╔══██║██╔══██╗██║ ██║██║██║╚██╗██║ // ██║ ╚═╝ ██║██║ ██║██║ ██║╚██████╔╝██║██║ ╚████║ // ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝ .-m { @include options($spacing, $props...) using ($value) { margin: -$value; } } .-mx { @include options($spacing, $props...) using ($value) { margin-right: -$value; margin-left: -$value; } } .-my { @include options($spacing, $props...) using ($value) { margin-bottom: -$value; margin-top: -$value; } } .-mt { @include options($spacing, $props...) using ($value) { margin-top: -$value; } } .-mr { @include options($spacing, $props...) using ($value) { margin-right: -$value; } } .-mb { @include options($spacing, $props...) using ($value) { margin-bottom: -$value; } } .-ml { @include options($spacing, $props...) using ($value) { margin-left: -$value; } } } // ██╗ █████╗ ██╗ ██╗ ██████╗ ██╗ ██╗████████╗ // ██║ ██╔══██╗╚██╗ ██╔╝██╔═══██╗██║ ██║╚══██╔══╝ // ██║ ███████║ ╚████╔╝ ██║ ██║██║ ██║ ██║ // ██║ ██╔══██║ ╚██╔╝ ██║ ██║██║ ██║ ██║ // ███████╗██║ ██║ ██║ ╚██████╔╝╚██████╔╝ ██║ // ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ $display: ( 'block': block, 'inline-block': inline-block, 'inline': inline, 'flex': flex, 'inline-flex': inline-flex, 'grid': grid, 'inline-grid': inline-grid, 'hidden': none, ) !default; @include options($display, 'responsive') using ($value) { display: $value; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,187 @@ @use 'sass:list' @use 'sass:meta' @use 'sass:selector' @use 'sass:string' /// List of available breakpoints. /// /// @type Map $breakpoints: () !default /// The string used to append breakpoints. /// /// @type String $breakpoint-glue: '\\:' !default /// The string used to append variants. /// /// @type String $variant-glue: '\\:' !default /// The string used to append options. /// /// @type String $option-glue: '-' !default /// Unset a given value from a list. /// /// @param {List} $list - The string that will be trimmed. /// @param {String} $value - Value that you want to be removed. /// @return {List} Returns the filtered list. @function _remove($list, $value) $result: () @for $i from 1 through list.length($list) @if list.nth($list, $i) != $value $result: list.append($result, list.nth($list, $i)) @return $result /// Generates the selector depending on the current variant and breakpoint. /// /// @param {String} $variant [null] /// @param {String} $breakpoint [null] /// @return {List} Returns the updated selector. @function _selector($variant: null, $breakpoint: null) $selectors: () @each $selector in & $selector: list.nth($selector, 1) @if meta.type-of($selector) == 'string' $selector: string.slice($selector, 2) // Add the variant to the current selector @if $variant $selector: '#{$variant}#{$variant-glue}#{$selector}' // Add the breakpoint to the current selector @if $breakpoint $selector: '#{$breakpoint}#{$breakpoint-glue}#{$selector}' // Convert back to a class @if $selector $selectors: list.append($selectors, '.#{$selector}', comma) @return $selectors /// Appends a pseudo-class to a selector. /// /// @param {String} $selector /// @param {String} $pseudo-class [null] /// @return {String} Returns the updated selector. @function _pseudo-class($selector, $pseudo-class: null) @if $pseudo-class $selector: selector.nest($selector, '&:#{$pseudo-class}') @return $selector /// Generates the css for a variant and breakpoint. /// /// @param {String} $variant /// @param {String} $breakpoint @mixin _variant($variant, $breakpoint) $pseudo-class: $variant $group: null // Handle group variants @if meta.type-of($variant) == 'string' and string.index($variant, 'group-') $pseudo-class: string.slice($pseudo-class, 7) $group: '.group' // Get the selector depending on the current variant and breakpoint $selector: _selector($variant, $breakpoint) @if $group #{_pseudo-class($group, $pseudo-class)} #{$selector} @content @else #{_pseudo-class($selector, $pseudo-class)} @content /// Distributes the input to the correct output. /// /// @param {List} $variants /// @param {String} $breakpoint @mixin _io($variants, $breakpoint) @if & @include _variant(null, $breakpoint) @content @each $variant in $variants @include _variant($variant, $breakpoint) @content @else @content($variants, $breakpoint) /// Generates the css for the given variants. /// /// @param {List} $variants [()] /// @param {String} $breakpoint [null] @mixin variants($variants: (), $breakpoint: null) // Check for the responsive variant $responsive: list.index($variants, 'responsive') @if $responsive $variants: _remove($variants, 'responsive') @at-root @include _io($variants, $breakpoint) using ($data...) @content($data...) @if $responsive @each $breakpoint, $value in $breakpoints @media screen and (min-width: #{$value}) @include _io($variants, $breakpoint) using ($data...) @content($data...) /// Responsive alias. /// /// @see {Mixin} variants /// @param {List} $variants [()] @mixin responsive($variants: ()) // Make responsive by default $variants: list.append($variants, 'responsive', space) @include variants($variants) using ($data...) @content($data...) /// Helper for creating option based modifiers or classes. /// /// @param {Map} $options /// @param {List} $variants [()] /// @param {List} $breakpoint [null] @mixin options($options, $variants: (), $breakpoint: null) @if & // Render options as a class modifier @each $key, $value in $options &#{$option-glue}#{$key} @include variants($variants, $breakpoint) @content($value) @else // Render options as seperate classes @include variants($variants, $breakpoint) using ($props...) @each $key, $value in $options .#{$key} @include variants($props...) @content($value) This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,238 +0,0 @@ -
Apr 29, 2020 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
Mar 6, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -194,7 +194,7 @@ $breakpoints: () !default; @if $responsive { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } -
Mar 6, 2020 . 1 changed file with 7 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,6 +3,12 @@ @use 'sass:string'; /// List of available breakpoints. /// /// @type Map $breakpoints: () !default; /// Unset a given value from a list. /// /// @param {List} $list - The string that will be trimmed. @@ -187,7 +193,7 @@ } @if $responsive { @each $breakpoint, $value in $breakpoints { @include at($value) { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); -
Mar 6, 2020 . 1 changed file with 201 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,204 @@ @use 'sass:list'; @use 'sass:meta'; @use 'sass:string'; /// Unset a given value from a list. /// /// @param {List} $list - The string that will be trimmed. /// @param {String} $value - Value that you want to be removed. /// @return {List} Returns the filtered list. @function __remove($list, $value) { $result: (); @for $i from 1 through list.length($list) { @if list.nth($list, $i) != $value { $result: list.append($result, list.nth($list, $i)); } } @return $result; } /// Creates the selector depending on the current variant and breakpoint. /// /// @param {String} $variant [null] /// @param {String} $breakpoint [null] /// @return {List} Returns the updated selector. @function __selector($variant: null, $breakpoint: null) { $selectors: (); @each $selector in & { $selector: list.nth($selector, 1); @if meta.type-of($selector) == 'string' { $selector: string.slice($selector, 2); } // Add the variant to the current selector @if $variant { $selector: '#{$variant}\\:#{$selector}'; } // Add the breakpoint to the current selector @if $breakpoint { $selector: '#{$breakpoint}\\:#{$selector}'; } @if $selector { // Convert back to a proper class $selectors: list.append($selectors, '.#{$selector}', comma); } } @return $selectors; } /// Appends a pseudo-class to a selector. /// /// @param {String} $selector /// @param {String} $pseudo-class [null] /// @return {String} Returns the updated selector. @function __pseudo-class($selector, $pseudo-class: null) { @if $pseudo-class { $selector: '#{$selector}:#{$pseudo-class}'; } @return $selector; } /// Generates the css for the given options depending on the current variant /// and breakpoint. /// /// @param {Map} $options /// @param {String} $variant [null] /// @param {String} $breakpoint [null] @mixin __options($options, $variant: null, $breakpoint: null) { $pseudo-class: $variant; $group: null; // Handle group variants @if meta.type-of($variant) == 'string' and string.index($variant, 'group-') { $pseudo-class: string.slice($pseudo-class, 7); $group: '.group'; } // Get the selector depending on the current variant and breakpoint $selector: __selector($variant, $breakpoint); @if $options { @each $key, $value in $options { @if $group { #{__pseudo-class($group, $pseudo-class)} { #{$selector} { @content($key, $value); } } } @else { #{$selector} { @content(__pseudo-class($key, $pseudo-class), $value); } } } } @else { @if $group { #{__pseudo-class($group, $pseudo-class)} { #{$selector} { @content; } } } @else { #{__pseudo-class($selector, $pseudo-class)} { @content; } } } } /// Generates the css for the given options and variants depending on the /// current breakpoint. /// /// @param {Map} $options /// @param {List} $variants /// @param {String} $breakpoint [null] @mixin __variants($options, $variants, $breakpoint: null) { @include __options($options, null, $breakpoint) using ($data...) { @content($data...); } @each $variant in $variants { @include __options($options, $variant, $breakpoint) using ($data...) { @content($data...); } } } /// Delegates input depending on the parent selector. /// /// @param {Map} $options /// @param {List} $variants /// @param {String} $breakpoint @mixin __generator($options, $variants, $breakpoint) { @if & { @include __variants($options, $variants, $breakpoint) using ($data...) { @content($data...); } } @else { // Pass options only if neccessary @if $options { @content($options, $variants, $breakpoint); } @else { @content($variants, $breakpoint); } } } /// Generates the css for the given options and variants. /// /// @param {Map} $options - Can be omitted /// @param {List} $variants [null] /// @param {String} $breakpoint [null] @mixin variants($options, $variants: null, $breakpoint: null) { // Shift attributes by one when the options map is omitted @if (meta.type-of($options) != 'map') { $breakpoint: $variants; $variants: $options; $options: null; } // Check for the responsive variant $responsive: list.index($variants, 'responsive'); @if $responsive { $variants: __remove($variants, 'responsive'); } @at-root { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } @if $responsive { @each $breakpoint, $value in config('breakpoints') { @include at($value) { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } } } } } } /// Generates the responsive css for the given options and additional variants. /// /// @param {Map} $options - Can be omitted -
Mar 6, 2020 . 1 changed file with 13 additions and 181 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,199 +1,31 @@ /// Generates the responsive css for the given options and additional variants. /// /// @param {Map} $options - Can be omitted /// @param {List} $variants [null] /// @param {String} $breakpoint [null] @mixin responsive($options: null, $variants: null) { // Shift attributes by one when the options map is omitted @if (meta.type-of($options) != 'map') { $variants: $options; $options: null; } // Make responsive by default @if $variants { $variants: list.append($variants, 'responsive'); } @else { $variants: 'responsive'; } // Pass options only if neccessary @if $options { @include variants($options, $variants) using ($data...) { @content($data...); } } @else { @include variants($variants) using ($data...) { @content($data...); } } } -
Mar 6, 2020 . 2 changed files with 60 additions and 14 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -21,7 +21,7 @@ .banana { @include variants('responsive' 'hover' 'group-hover') { color: #FFE135; } } @@ -39,7 +39,7 @@ 'right': right, 'center': center, 'justify': justify, ),'responsive') using ($key, $value) { &-#{$key} { text-align: $value; } @@ -122,9 +122,9 @@ $options: map.merge(( 'auto': auto, ), $options); @include variants($options, 'responsive') using ($args...) { .m { @include variants($args...) using ($key, $value) { &-#{$key} { margin: $value; } @@ -158,7 +158,7 @@ $options: map.merge(( } .-m { @include variants($args...) using ($key, $value) { $vaue: -#{$value}; &-#{$key} { @@ -193,3 +193,49 @@ $options: map.merge(( } } } // ██╗ █████╗ ██╗ ██╗ ██████╗ ██╗ ██╗████████╗ // ██║ ██╔══██╗╚██╗ ██╔╝██╔═══██╗██║ ██║╚══██╔══╝ // ██║ ███████║ ╚████╔╝ ██║ ██║██║ ██║ ██║ // ██║ ██╔══██║ ╚██╔╝ ██║ ██║██║ ██║ ██║ // ███████╗██║ ██║ ██║ ╚██████╔╝╚██████╔╝ ██║ // ╚══════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═════╝ ╚═╝ @include variants('responsive') using ($args...) { .block { @include variants($args...) { display: block; } } .inline-block { @include variants($args...) { display: inline-block; } } .inline { @include variants($args...) { display: inline; } } .flex { @include variants($args...) { display: flex; } } .inline-flex { @include variants($args...) { display: inline-flex; } } .hidden { @include variants($args...) { display: none; } } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,12 +3,6 @@ @use 'sass:string'; /// Unset a given value from a list. /// /// @param {List} $list - The string that will be trimmed. @@ -155,7 +149,13 @@ $breakpoints: () !default; @content($data...); } } @else { // Pass options only if neccessary @if $options { @content($options, $variants, $breakpoint); } @else { @content($variants, $breakpoint); } } } @@ -187,8 +187,8 @@ $breakpoints: () !default; } @if $responsive { @each $breakpoint, $value in config('breakpoints') { @include at($value) { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } -
Jan 29, 2020 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -167,7 +167,7 @@ $breakpoints: () !default; /// @param {String} $breakpoint [null] @mixin variants($options, $variants: null, $breakpoint: null) { // Shift attributes by one when the options map is omitted @if (meta.type-of($options) != 'map') { $breakpoint: $variants; $variants: $options; -
Jan 29, 2020 . 2 changed files with 163 additions and 57 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,15 +12,15 @@ // http://www.patorjk.com/software/taag/#p=display&v=0&f=ANSI%20Shadow&t=variant // ██████╗ █████╗ ███╗ ██╗ █████╗ ███╗ ██╗ █████╗ // ██╔══██╗██╔══██╗████╗ ██║██╔══██╗████╗ ██║██╔══██╗ // ██████╔╝███████║██╔██╗ ██║███████║██╔██╗ ██║███████║ // ██╔══██╗██╔══██║██║╚██╗██║██╔══██║██║╚██╗██║██╔══██║ // ██████╔╝██║ ██║██║ ╚████║██║ ██║██║ ╚████║██║ ██║ // ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝ .banana { @include variants('responsive' 'hover' 'group-hover') { color: yellow; } } @@ -122,36 +122,74 @@ $options: map.merge(( 'auto': auto, ), $options); @include variants($options, 'responsive') using ($attr...) { .m { @include variants($attr...) using ($key, $value) { &-#{$key} { margin: $value; } &x-#{$key} { margin-right: $value; margin-left: $value; } &y-#{$key} { margin-bottom: $value; margin-top: $value; } &t-#{$key} { margin-top: $value; } &r-#{$key} { margin-right: $value; } &b-#{$key} { margin-bottom: $value; } &l-#{$key} { margin-left: $value; } } } .-m { @include variants($attr...) using ($key, $value) { $vaue: -#{$value}; &-#{$key} { margin: $value; } &x-#{$key} { margin-right: $value; margin-left: $value; } &y-#{$key} { margin-bottom: $value; margin-top: $value; } &t-#{$key} { margin-top: $value; } &r-#{$key} { margin-right: $value; } &b-#{$key} { margin-bottom: $value; } &l-#{$key} { margin-left: $value; } } } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,9 +1,20 @@ @use 'sass:list'; @use 'sass:meta'; @use 'sass:string'; /// List of available breakpoints. /// /// @type Map $breakpoints: () !default; /// Unset a given value from a list. /// /// @param {List} $list - The string that will be trimmed. /// @param {String} $value - Value that you want to be removed. /// @return {List} Returns the filtered list. @function __remove($list, $value) { $result: (); @for $i from 1 through list.length($list) { @@ -15,12 +26,21 @@ $breakpoints: () !default; @return $result; } /// Creates the selector depending on the current variant and breakpoint. /// /// @param {String} $variant [null] /// @param {String} $breakpoint [null] /// @return {List} Returns the updated selector. @function __selector($variant: null, $breakpoint: null) { $selectors: (); @each $selector in & { $selector: list.nth($selector, 1); @if meta.type-of($selector) == 'string' { $selector: string.slice($selector, 2); } // Add the variant to the current selector @if $variant { @@ -32,100 +52,148 @@ $breakpoints: () !default; $selector: '#{$breakpoint}\\:#{$selector}'; } @if $selector { // Convert back to a proper class $selectors: list.append($selectors, '.#{$selector}', comma); } } @return $selectors; } /// Appends a pseudo-class to a selector. /// /// @param {String} $selector /// @param {String} $pseudo-class [null] /// @return {String} Returns the updated selector. @function __pseudo-class($selector, $pseudo-class: null) { @if $pseudo-class { $selector: '#{$selector}:#{$pseudo-class}'; } @return $selector; } /// Generates the css for the given options depending on the current variant /// and breakpoint. /// /// @param {Map} $options /// @param {String} $variant [null] /// @param {String} $breakpoint [null] @mixin __options($options, $variant: null, $breakpoint: null) { $pseudo-class: $variant; $group: null; // Handle group variants @if meta.type-of($variant) == 'string' and string.index($variant, 'group-') { $pseudo-class: string.slice($pseudo-class, 7); $group: '.group'; } // Get the selector depending on the current variant and breakpoint $selector: __selector($variant, $breakpoint); @if $options { @each $key, $value in $options { @if $group { #{__pseudo-class($group, $pseudo-class)} { #{$selector} { @content($key, $value); } } } @else { #{$selector} { @content(__pseudo-class($key, $pseudo-class), $value); } } } } @else { @if $group { #{__pseudo-class($group, $pseudo-class)} { #{$selector} { @content; } } } @else { #{__pseudo-class($selector, $pseudo-class)} { @content; } } } } /// Generates the css for the given options and variants depending on the /// current breakpoint. /// /// @param {Map} $options /// @param {List} $variants /// @param {String} $breakpoint [null] @mixin __variants($options, $variants, $breakpoint: null) { @include __options($options, null, $breakpoint) using ($data...) { @content($data...); } @each $variant in $variants { @include __options($options, $variant, $breakpoint) using ($data...) { @content($data...); } } } /// Delegates input depending on the parent selector. /// /// @param {Map} $options /// @param {List} $variants /// @param {String} $breakpoint @mixin __generator($options, $variants, $breakpoint) { @if & { @include __variants($options, $variants, $breakpoint) using ($data...) { @content($data...); } } @else { @content($options, $variants, $breakpoint); } } /// Generates the css for the given options and variants. /// /// @param {Map} $options - Can be omitted /// @param {List} $variants [null] /// @param {String} $breakpoint [null] @mixin variants($options, $variants: null, $breakpoint: null) { // Shifts attributes by one when the options map is omitted @if (meta.type-of($options) != 'map') { $breakpoint: $variants; $variants: $options; $options: null; } // Check for the responsive variant $responsive: list.index($variants, 'responsive'); @if $responsive { $variants: __remove($variants, 'responsive'); } @at-root { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } @if $responsive { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { @include __generator($options, $variants, $breakpoint) using ($data...) { @content($data...); } } } } } } -
Nov 7, 2019 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -20,7 +20,7 @@ // ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝ .banana { @include variants('responsive' 'hover') { color: yellow; } } -
Nov 7, 2019 . 1 changed file with 8 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -11,6 +11,14 @@ // ASCII Art Generator // http://www.patorjk.com/software/taag/#p=display&v=0&f=ANSI%20Shadow&t=variant // ██████╗ █████╗ ███╗ ██╗ █████╗ ███╗ ██╗ █████╗ // ██╔══██╗██╔══██╗████╗ ██║██╔══██╗████╗ ██║██╔══██╗ // ██████╔╝███████║██╔██╗ ██║███████║██╔██╗ ██║███████║ // ██╔══██╗██╔══██║██║╚██╗██║██╔══██║██║╚██╗██║██╔══██║ // ██████╔╝██║ ██║██║ ╚████║██║ ██║██║ ╚████║██║ ██║ // ╚═════╝ ╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═╝ ╚═╝ .banana { @include variants('hover') { color: yellow; -
Nov 7, 2019 . No changes.There are no files selected for viewing
-
Nov 7, 2019 . 1 changed file with 30 additions and 20 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -8,41 +8,44 @@ ) ); // ASCII Art Generator // http://www.patorjk.com/software/taag/#p=display&v=0&f=ANSI%20Shadow&t=variant .banana { @include variants('hover') { color: yellow; } } // ████████╗███████╗██╗ ██╗████████╗ // ╚══██╔══╝██╔════╝╚██╗██╔╝╚══██╔══╝ // ██║ █████╗ ╚███╔╝ ██║ // ██║ ██╔══╝ ██╔██╗ ██║ // ██║ ███████╗██╔╝ ██╗ ██║ // ╚═╝ ╚══════╝╚═╝ ╚═╝ ╚═╝ .text { @include variants(( 'left': left, 'right': right, 'center': center, 'justify': justify, ), 'responsive') using ($key, $value) { &-#{$key} { text-align: $value; } } } // ██████╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ ██████╗ // ██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║████╗ ██║██╔════╝ // ██████╔╝███████║██║ ██║██║ ██║██║██╔██╗ ██║██║ ███╗ // ██╔═══╝ ██╔══██║██║ ██║██║ ██║██║██║╚██╗██║██║ ██║ // ██║ ██║ ██║██████╔╝██████╔╝██║██║ ╚████║╚██████╔╝ // ╚═╝ ╚═╝ ╚═╝╚═════╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝ ╚═════╝ $options: ( 'px': 1px, '0': 0, @@ -100,6 +103,13 @@ $options: ( } // ███╗ ███╗ █████╗ ██████╗ ██████╗ ██╗███╗ ██╗ // ████╗ ████║██╔══██╗██╔══██╗██╔════╝ ██║████╗ ██║ // ██╔████╔██║███████║██████╔╝██║ ███╗██║██╔██╗ ██║ // ██║╚██╔╝██║██╔══██║██╔══██╗██║ ██║██║██║╚██╗██║ // ██║ ╚═╝ ██║██║ ██║██║ ██║╚██████╔╝██║██║ ╚████║ // ╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝ ╚═════╝ ╚═╝╚═╝ ╚═══╝ $options: map.merge(( 'auto': auto, ), $options); @@ -136,4 +146,4 @@ $options: map.merge(( margin-left: $value; } } } -
Nov 7, 2019 . 1 changed file with 124 additions and 127 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -4,7 +4,7 @@ 'small': 640px, 'medium': 768px, 'large': 1024px, 'wide': 1280px, ) ); @@ -14,129 +14,126 @@ } } .col { @include variants(( '1': 1, '2': 2, '3': 3, ), 'responsive') using ($key, $value) { &-#{$key} { column-count: $value; } } } .gap { @include variants(( '0': 0, '1': 1rem, '2': 2rem, '3': 3rem, ), 'responsive') using ($key, $value) { &-#{$key} { column-gap: $value; grid-gap: $value; } } } $options: ( 'px': 1px, '0': 0, '1': .25rem, '2': .5rem, '3': .75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem, '8': 2rem, '10': 2.5rem, '12': 3rem, '16': 4rem, '20': 5rem, '24': 6rem, '32': 8rem, '40': 10rem, '48': 12rem, '56': 14rem, '64': 16rem, ); .p { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { padding: $value; } &x-#{$key} { padding-right: $value; padding-left: $value; } &y-#{$key} { padding-bottom: $value; padding-top: $value; } &t-#{$key} { padding-top: $value; } &r-#{$key} { padding-right: $value; } &b-#{$key} { padding-bottom: $value; } &l-#{$key} { padding-left: $value; } } } $options: map.merge(( 'auto': auto, ), $options); .m { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { margin: $value; } &x-#{$key} { margin-right: $value; margin-left: $value; } &y-#{$key} { margin-bottom: $value; margin-top: $value; } &t-#{$key} { margin-top: $value; } &r-#{$key} { margin-right: $value; } &b-#{$key} { margin-bottom: $value; } &l-#{$key} { margin-left: $value; } } } -
Nov 7, 2019 . 1 changed file with 9 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -97,7 +97,15 @@ $breakpoints: () !default; @mixin variants($options.../*, $variants: ()*/) { $variants: list.nth($options, -1); $options: list.nth($options, 1); @if (type-of($variants) == 'map') { $variants: null; } @if (type-of($options) != 'map') { $options: null; } $responsive: list.index($variants, 'responsive'); -
Nov 7, 2019 . 1 changed file with 54 additions and 74 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,6 +3,18 @@ $breakpoints: () !default; @function _remove($list, $value) { $result: (); @for $i from 1 through list.length($list) { @if list.nth($list, $i) != $value { $result: list.append($result, list.nth($list, $i)); } } @return $result; } @function _selector($variant: null, $breakpoint: null) { $selectors: (); @@ -27,54 +39,58 @@ $breakpoints: () !default; @return $selectors; } @function _pseudo-class($key, $variant: null) { @if $variant { $key: '#{$key}:#{$variant}'; } @return $key; } @mixin _options($options, $variant: null, $breakpoint: null) { $pseudo-class: $variant; $group: null; @if type-of($variant) == 'string' and string.index($variant, 'group-') { $pseudo-class: string.slice($pseudo-class, 7); $group: '.group'; } $selector: _selector($variant, $breakpoint); @if $options { @each $key, $value in $options { @if $group { #{_pseudo-class($group, $pseudo-class)} #{$selector} { @content($key, $value); } } @else { #{$selector} { @content(_pseudo-class($key, $pseudo-class), $value); } } } } @else { @if $group { #{_pseudo-class($group, $pseudo-class)} #{$selector} { @content; } } @else { #{_pseudo-class($selector, $pseudo-class)} { @content; } } } } @mixin _variants($options, $variants, $breakpoint: null) { @include _options($options, null, $breakpoint) using ($data...) { @content($data...); } @each $variant in $variants { @include _options($options, $variant, $breakpoint) using ($data...) { @content($data...); } } } @@ -90,54 +106,18 @@ $breakpoints: () !default; } @at-root { @include _variants($options, $variants) using ($data...) { @content($data...); } @if $responsive { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { @include _variants($options, $variants, $breakpoint) using ($data...) { @content($data...); } } } } } } -
Oct 31, 2019 . 2 changed files with 178 additions and 130 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -8,130 +8,135 @@ ) ); .banana { @include variants('hover') { color: yellow; } } // $options: ( // '0': 0, // '1': 1, // '2': 2, // '3': 3, // ); // // .col { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // column-count: $value; // } // } // } // $options: ( // '0': 0, // '1': 1rem, // '2': 2rem, // '3': 3rem, // ); // // .col-gap { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // column-gap: $value; // } // } // } // // // $options: ( // 'px': 1px, // '0': 0, // '1': .25rem, // '2': .5rem, // '3': .75rem, // '4': 1rem, // '5': 1.25rem, // '6': 1.5rem, // '8': 2rem, // '10': 2.5rem, // '12': 3rem, // '16': 4rem, // '20': 5rem, // '24': 6rem, // '32': 8rem, // '40': 10rem, // '48': 12rem, // '56': 14rem, // '64': 16rem, // ); // // .p { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // padding: $value; // } // // &x-#{$key} { // padding-right: $value; // padding-left: $value; // } // // &y-#{$key} { // padding-bottom: $value; // padding-top: $value; // } // // &t-#{$key} { // padding-top: $value; // } // // &r-#{$key} { // padding-right: $value; // } // // &b-#{$key} { // padding-bottom: $value; // } // // &l-#{$key} { // padding-left: $value; // } // } // } // // // $options: map.merge(( // 'auto': auto, // ), $options); // // .m { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // margin: $value; // } // // &x-#{$key} { // margin-right: $value; // margin-left: $value; // } // // &y-#{$key} { // margin-bottom: $value; // margin-top: $value; // } // // &t-#{$key} { // margin-top: $value; // } // // &r-#{$key} { // margin-right: $value; // } // // &b-#{$key} { // margin-bottom: $value; // } // // &l-#{$key} { // margin-left: $value; // } // } // } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -79,22 +79,65 @@ $breakpoints: () !default; } } @mixin variants($options.../*, $variants: ()*/) { $variants: list.nth($options, -1); $options: if(list.length($options) > 1, list.nth($options, 1), null); $responsive: list.index($variants, 'responsive'); @if $responsive { $variants: _remove($variants, 'responsive'); } @at-root { @if $options { @include _create-variants($options, $variants) using ($key, $value) { @content($key, $value); } @if $responsive { @include _create-responsive($options, $variants) using ($key, $value) { @content($key, $value); } } } @else { #{_selector(null, null)} { @content; } @each $variant in $variants { #{_key(_selector($variant, null), $variant)} { @content; } } @if $responsive { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { #{_selector(null, $breakpoint)} { @content; } @each $variant in $variants { #{_key(_selector($variant, $breakpoint), $variant)} { @content; } } } } } } } } -
Oct 28, 2019 . 2 changed files with 21 additions and 21 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,5 @@ @use 'sass:map'; @use 'variants' as * with ( $breakpoints: ( 'small': 640px, 'medium': 768px, @@ -17,7 +17,7 @@ $options: ( ); .col { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { column-count: $value; } @@ -33,7 +33,7 @@ $options: ( ); .col-gap { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { column-gap: $value; } @@ -64,7 +64,7 @@ $options: ( ); .p { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { padding: $value; } @@ -103,7 +103,7 @@ $options: map.merge(( ), $options); .m { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { margin: $value; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -3,7 +3,7 @@ $breakpoints: () !default; @function _selector($variant: null, $breakpoint: null) { $selectors: (); @each $selector in & { @@ -27,15 +27,15 @@ $breakpoints: () !default; @return $selectors; } @function _key($key, $variant: null) { @if $variant { $key: '#{$key}:#{$variant}'; } @return $key; } @function _remove($list, $value) { $result: (); @for $i from 1 through list.length($list) { @@ -47,54 +47,54 @@ $breakpoints: () !default; @return $result; } @mixin _create-options($options, $variant: null, $breakpoint: null) { $selector: _selector($variant, $breakpoint); @each $key, $value in $options { #{$selector} { @content(_key($key, $variant), $value); } } } @mixin _create-variants($options, $variants, $breakpoint: null) { @include _create-options($options, null, $breakpoint) using ($key, $value) { @content($key, $value); } @each $variant in $variants { @include _create-options($options, $variant, $breakpoint) using ($key, $value) { @content($key, $value); } } } @mixin _create-responsive($options, $variants) { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { @include _create-variants($options, $variants, $breakpoint) using ($key, $value) { @content($key, $value); } } } } @mixin variants($options, $variants: ()) { $responsive: list.index($variants, 'responsive'); @if $responsive { $variants: _remove($variants, 'responsive'); } @at-root { @include _create-variants($options, $variants) using ($key, $value) { @content($key, $value); } @if $responsive { @include _create-responsive($options, $variants) using ($key, $value) { @content($key, $value); } } } } -
Oct 28, 2019 . 2 changed files with 7 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,5 +1,5 @@ @use 'sass:map'; @use 'variants' with ( $breakpoints: ( 'small': 640px, 'medium': 768px, @@ -17,7 +17,7 @@ $options: ( ); .col { @include variants.create($options, 'responsive') using ($key, $value) { &-#{$key} { column-count: $value; } @@ -33,7 +33,7 @@ $options: ( ); .col-gap { @include variants.create($options, 'responsive') using ($key, $value) { &-#{$key} { column-gap: $value; } @@ -64,7 +64,7 @@ $options: ( ); .p { @include variants.create($options, 'responsive') using ($key, $value) { &-#{$key} { padding: $value; } @@ -103,7 +103,7 @@ $options: map.merge(( ), $options); .m { @include variants.create($options, 'responsive') using ($key, $value) { &-#{$key} { margin: $value; } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -79,7 +79,7 @@ $breakpoints: () !default; } } @mixin create($options, $variants: ()) { $responsive: list.index($variants, 'responsive'); @if $responsive { @@ -97,4 +97,4 @@ $breakpoints: () !default; } } } } -
Oct 28, 2019 . 1 changed file with 0 additions and 4861 deletions.There are no files selected for viewing
-
Oct 28, 2019 . 3 changed files with 5081 additions and 123 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,137 @@ @use 'sass:map'; @use 'variants' as * with ( $breakpoints: ( 'small': 640px, 'medium': 768px, 'large': 1024px, 'larger': 1280px, ) ); $options: ( '0': 0, '1': 1, '2': 2, '3': 3, ); .col { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { column-count: $value; } } } $options: ( '0': 0, '1': 1rem, '2': 2rem, '3': 3rem, ); .col-gap { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { column-gap: $value; } } } $options: ( 'px': 1px, '0': 0, '1': .25rem, '2': .5rem, '3': .75rem, '4': 1rem, '5': 1.25rem, '6': 1.5rem, '8': 2rem, '10': 2.5rem, '12': 3rem, '16': 4rem, '20': 5rem, '24': 6rem, '32': 8rem, '40': 10rem, '48': 12rem, '56': 14rem, '64': 16rem, ); .p { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { padding: $value; } &x-#{$key} { padding-right: $value; padding-left: $value; } &y-#{$key} { padding-bottom: $value; padding-top: $value; } &t-#{$key} { padding-top: $value; } &r-#{$key} { padding-right: $value; } &b-#{$key} { padding-bottom: $value; } &l-#{$key} { padding-left: $value; } } } $options: map.merge(( 'auto': auto, ), $options); .m { @include variants($options, 'responsive') using ($key, $value) { &-#{$key} { margin: $value; } &x-#{$key} { margin-right: $value; margin-left: $value; } &y-#{$key} { margin-bottom: $value; margin-top: $value; } &t-#{$key} { margin-top: $value; } &r-#{$key} { margin-right: $value; } &b-#{$key} { margin-bottom: $value; } &l-#{$key} { margin-left: $value; } } } This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,140 +1,100 @@ @use 'sass:string'; @use 'sass:list'; $breakpoints: () !default; @function selector($variant: null, $breakpoint: null) { $selectors: (); @each $selector in & { $selector: list.nth($selector, 1); $selector: string.slice($selector, 2); // Add the variant to the current selector @if $variant { $selector: '#{$variant}\\:#{$selector}'; } // Add the breakpoint to the current selector @if $breakpoint { $selector: '#{$breakpoint}\\:#{$selector}'; } // Convert back to a proper class $selectors: list.append($selectors, '.#{$selector}', comma); } @return $selectors; } @function key($key, $variant: null) { @if $variant { $key: '#{$key}:#{$variant}'; } @return $key; } @function remove($list, $value) { $result: (); @for $i from 1 through list.length($list) { @if list.nth($list, $i) != $value { $result: list.append($result, list.nth($list, $i)); } } @return $result; } @mixin create-options($options, $variant: null, $breakpoint: null) { $selector: selector($variant, $breakpoint); @each $key, $value in $options { #{$selector} { @content(key($key, $variant), $value); } } } @mixin create-variants($options, $variants, $breakpoint: null) { @include create-options($options, null, $breakpoint) using ($key, $value) { @content($key, $value); } @each $variant in $variants { @include create-options($options, $variant, $breakpoint) using ($key, $value) { @content($key, $value); } } } @mixin create-responsive($options, $variants) { @each $breakpoint, $value in $breakpoints { @media screen and (min-width: #{$value}) { @include create-variants($options, $variants, $breakpoint) using ($key, $value) { @content($key, $value); } } } } @mixin variants($options, $variants: ()) { $responsive: list.index($variants, 'responsive'); @if $responsive { $variants: remove($variants, 'responsive'); } @at-root { @include create-variants($options, $variants) using ($key, $value) { @content($key, $value); } @if $responsive { @include create-responsive($options, $variants) using ($key, $value) { @content($key, $value); } } } } -
Oct 25, 2019 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,140 @@ @use 'sass:selector'; @use 'sass:list'; @mixin variants($options, $variants: ()) { @each $key, $value in $options { // $selector: selector.replace(&, &, '.\\@medium--col'); $selectors: ('.test'); @debug type-of(&); // @debug selector.simple-selectors(&); @each $selector in & { @debug selector.simple-selectors($selector); // $selector: selector.simple-selectors($selector); // $selector: string.slice($selector, 2); $selectors: list.append($selectors, $selector, comma); } @at-root { #{$selectors} { @content($key, $value); } } } } $options: ( '0': 0, '1': 1, '2': 2, '3': 3, ); .col { @include variants($options, 'responsive' 'focus' 'active') using ($key, $value) { &-#{$key} { column-count: $value; } } } // .col-gap { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // column-gap: $value; // } // } // } // // $options: ( // 'px': 1px, // '0': 0, // '1': .25rem, // '2': .5rem, // '3': .75rem, // '4': 1rem, // '5': 1.25rem, // '6': 1.5rem, // '8': 2rem, // '10': 2.5rem, // '12': 3rem, // '16': 4rem, // '20': 5rem, // '24': 6rem, // '32': 8rem, // '40': 10rem, // '48': 12rem, // '56': 14rem, // '64': 16rem, // ); // // .p { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // padding: $value; // } // // &x-#{$key} { // padding-right: $value; // padding-left: $value; // } // // &y-#{$key} { // padding-bottom: $value; // padding-top: $value; // } // // &t-#{$key} { // padding-top: $value; // } // // &r-#{$key} { // padding-right: $value; // } // // &b-#{$key} { // padding-bottom: $value; // } // // &l-#{$key} { // padding-left: $value; // } // } // } // // .m { // @include variants($options, 'responsive') using ($key, $value) { // &-#{$key} { // margin: $value; // } // // &x-#{$key} { // margin-right: $value; // margin-left: $value; // } // // &y-#{$key} { // margin-bottom: $value; // margin-top: $value; // } // // &t-#{$key} { // margin-top: $value; // } // // &r-#{$key} { // margin-right: $value; // } // // &b-#{$key} { // margin-bottom: $value; // } // // &l-#{$key} { // margin-left: $value; // } // } // }