Skip to content

Instantly share code, notes, and snippets.

@sarahdayan

sarahdayan/modifiers.scss

Last active November 15, 2024 15:56
Show Gist options
  • Save sarahdayan/4d2cc04a636e8039f10a889a0e29fbd9 to your computer and use it in GitHub Desktop.
Save sarahdayan/4d2cc04a636e8039f10a889a0e29fbd9 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. sarahdayan revised this gist Feb 20, 2018. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions modifiers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -4,6 +4,7 @@
    // ----

    // Sass modifiers mixin by Sarah Dayan
    // Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
    // http://frontstuff.io
    // https://github.com/sarahdayan

  2. sarahdayan revised this gist Dec 3, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion modifiers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -32,7 +32,7 @@ $font-sizes: (
    @mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
    @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
    @if type-of($value) == 'map' {
    @if type-of($value) == 'map' {
    @include modifiers($value, $attribute, $separator);
    }
    @else {
  3. sarahdayan revised this gist Dec 3, 2017. No changes.
  4. sarahdayan revised this gist Dec 3, 2017. 2 changed files with 5 additions and 14 deletions.
    16 changes: 2 additions & 14 deletions modifiers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,20 +7,8 @@
    // http://frontstuff.io
    // https://github.com/sarahdayan

    // Dependency: map-depth by Hugo Giraudel https://hugogiraudel.com
    @function map-depth($map) {
    $level: 1;

    @each $key, $value in $map {
    @if type-of($value) == "map" {
    $level: max(map-depth($value) + 1, $level);
    }
    }

    @return $level;
    }

    $colors: (
    red: #ff3538,
    grey: (
    base: #404145,
    light: #c7c7cd
    @@ -44,7 +32,7 @@ $font-sizes: (
    @mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
    @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
    @if map-depth($map) > 1 {
    @if type-of($value) == 'map' {
    @include modifiers($value, $attribute, $separator);
    }
    @else {
    3 changes: 3 additions & 0 deletions undefined
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,6 @@
    .text-red {
    color: #ff3538;
    }
    .text-grey {
    color: #404145;
    }
  5. sarahdayan revised this gist Dec 2, 2017. No changes.
  6. sarahdayan revised this gist Dec 2, 2017. No changes.
  7. sarahdayan revised this gist Dec 2, 2017. 1 changed file with 0 additions and 27 deletions.
    27 changes: 0 additions & 27 deletions output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +0,0 @@
    .text-grey {
    color: #404145;
    }
    .text-grey:light {
    color: #c7c7cd;
    }
    .text-yellow {
    color: #ecaf2d;
    }
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    font-size: 12px;
    }
    .text--l {
    font-size: 16px;
    }
    .text--xl {
    font-size: 18px;
    }
    .text--xxl {
    font-size: 20px;
    }
  8. sarahdayan revised this gist Dec 2, 2017. 2 changed files with 12 additions and 12 deletions.
    10 changes: 5 additions & 5 deletions modifiers.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -34,11 +34,11 @@ $colors: (
    );

    $font-sizes: (
    base: 14px,
    s: 12px,
    l: 16px,
    xl: 18px,
    xxl: 20px
    small: 12px,
    medium: 14px,
    large: 16px,
    x-large: 18px,
    xx-large: 20px
    );

    @mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
    14 changes: 7 additions & 7 deletions undefined
    View file
    Original file line number Diff line number Diff line change
    @@ -10,18 +10,18 @@
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    .text--small {
    font-size: 12px;
    }
    .text--l {
    .text--medium {
    font-size: 14px;
    }
    .text--large {
    font-size: 16px;
    }
    .text--xl {
    .text--x-large {
    font-size: 18px;
    }
    .text--xxl {
    .text--xx-large {
    font-size: 20px;
    }
  9. sarahdayan revised this gist Dec 2, 2017. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions undefined
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    .text-grey {
    color: #404145;
    }
    .text-grey:light {
    color: #c7c7cd;
    }
    .text-yellow {
    color: #ecaf2d;
    }
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    font-size: 12px;
    }
    .text--l {
    font-size: 16px;
    }
    .text--xl {
    font-size: 18px;
    }
    .text--xxl {
    font-size: 20px;
    }
  10. sarahdayan renamed this gist Dec 2, 2017. 1 changed file with 0 additions and 0 deletions.
    0 undefined → output.css
    View file
    File renamed without changes.
  11. sarahdayan revised this gist Dec 2, 2017. 1 changed file with 27 additions and 0 deletions.
    27 changes: 27 additions & 0 deletions undefined
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    .text-grey {
    color: #404145;
    }
    .text-grey:light {
    color: #c7c7cd;
    }
    .text-yellow {
    color: #ecaf2d;
    }
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    font-size: 12px;
    }
    .text--l {
    font-size: 16px;
    }
    .text--xl {
    font-size: 18px;
    }
    .text--xxl {
    font-size: 20px;
    }
  12. sarahdayan revised this gist Dec 2, 2017. 1 changed file with 0 additions and 27 deletions.
    27 changes: 0 additions & 27 deletions modifiers.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,27 +0,0 @@
    .text-grey {
    color: #404145;
    }
    .text-grey:light {
    color: #c7c7cd;
    }
    .text-yellow {
    color: #ecaf2d;
    }
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    font-size: 12px;
    }
    .text--l {
    font-size: 16px;
    }
    .text--xl {
    font-size: 18px;
    }
    .text--xxl {
    font-size: 20px;
    }
  13. sarahdayan revised this gist Dec 2, 2017. 2 changed files with 0 additions and 0 deletions.
    0 SassMeister-output.css → modifiers.css
    View file
    File renamed without changes.
    0 SassMeister-input.scss → modifiers.scss
    View file
    File renamed without changes.
  14. sarahdayan revised this gist Dec 2, 2017. No changes.
  15. sarahdayan created this gist Dec 2, 2017.
    60 changes: 60 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    // ----
    // Sass (v3.4.21)
    // Compass (v1.0.3)
    // ----

    // Sass modifiers mixin by Sarah Dayan
    // http://frontstuff.io
    // https://github.com/sarahdayan

    // Dependency: map-depth by Hugo Giraudel https://hugogiraudel.com
    @function map-depth($map) {
    $level: 1;

    @each $key, $value in $map {
    @if type-of($value) == "map" {
    $level: max(map-depth($value) + 1, $level);
    }
    }

    @return $level;
    }

    $colors: (
    grey: (
    base: #404145,
    light: #c7c7cd
    ),
    yellow: (
    base: #ecaf2d
    ),
    green: (
    base: #5ad864
    )
    );

    $font-sizes: (
    base: 14px,
    s: 12px,
    l: 16px,
    xl: 18px,
    xxl: 20px
    );

    @mixin modifiers($map, $attribute, $prefix: '-', $separator: '-', $base: 'base') {
    @each $key, $value in $map {
    &#{if($key != $base, #{$prefix}#{$key}, '')} {
    @if map-depth($map) > 1 {
    @include modifiers($value, $attribute, $separator);
    }
    @else {
    #{$attribute}: $value;
    }
    }
    }
    }

    .text {
    @include modifiers($colors, 'color', $separator: ':');
    @include modifiers($font-sizes, 'font-size', '--');
    }
    27 changes: 27 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,27 @@
    .text-grey {
    color: #404145;
    }
    .text-grey:light {
    color: #c7c7cd;
    }
    .text-yellow {
    color: #ecaf2d;
    }
    .text-green {
    color: #5ad864;
    }
    .text {
    font-size: 14px;
    }
    .text--s {
    font-size: 12px;
    }
    .text--l {
    font-size: 16px;
    }
    .text--xl {
    font-size: 18px;
    }
    .text--xxl {
    font-size: 20px;
    }