Skip to content

Instantly share code, notes, and snippets.

@Hypercubed

Hypercubed/input.scss

Created June 4, 2023 00:36
Download ZIP

Revisions

  1. Hypercubed created this gist Jun 4, 2023.
    78 changes: 78 additions & 0 deletions input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    @use 'sass:map';
    @use 'sass:list';
    @use 'sass:selector';

    @function to-string($list, $glue: '') {
    $result: nth($list, 1);

    @if length($list) > 1 {
    @for $i from 2 through length($list) {
    $result: $result + $glue + nth($list, $i);
    }
    }

    @return $result;
    }

    $tokens: (
    'color-red': #ff0000,
    'color-blue': #00ff00,
    'color-green': #0000ff,
    'size-40': 2.5rem,
    'size-48': 3rem,
    'size-56': 3.5rem,
    'shadow-2xs': var(----shadow-2xs)
    );

    $sizes: (
    40,
    48,
    56
    );

    $colors: (
    'red',
    'blue',
    'green'
    );

    $MIXINS: ();

    @mixin define-mixin($name) {
    $internal-name: inline-#{unique-id()};
    $MIXINS: map.set($MIXINS, $name, $internal-name) !global;

    @at-root {
    %#{$internal-name} {
    @content;
    }
    }
    }

    @mixin define-mixins($name, $prefix, $prop, $map) {
    @each $item in $map {
    $key: $name + '-' + $item;
    $value: map.get($tokens, $key);
    $var: var(--#{$key}, $value);

    @include define-mixin($prefix + '-' + $item) {
    #{$prop}: $var;
    }
    }
    }

    @include define-mixins('size', 'p', 'padding', $sizes);
    @include define-mixins('size', 'm', 'margin', $sizes);
    @include define-mixins('color', 'color', 'color', $colors);
    @include define-mixins('color', 'bg', 'background-color', $colors);

    @mixin apply-mixin($names...) {
    @each $name in $names {
    $internal-name: map.get($MIXINS, $name);
    @extend %#{$internal-name};
    }
    }

    .element {
    @include apply-mixin('m-40', 'p-40', 'color-red', 'bg-green');
    }
    15 changes: 15 additions & 0 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    .element {
    padding: var(--size-40, 2.5rem);
    }

    .element {
    margin: var(--size-40, 2.5rem);
    }

    .element {
    color: var(--color-red, #ff0000);
    }

    .element {
    background-color: var(--color-green, #0000ff);
    }
    9 changes: 9 additions & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    {
    "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
    },
    "autoprefixer": false
    }