SCSS mixin add value for two (or more) css properties-CodePudding

I am using a mixin to generate classes for both margin and spacing. It works like a champ, but I want to add a couple more classes but not sure how I can accomplish what I'm trying to accomplish.

The current code is:

$max: 20;
$offset: 4;
$unit: 'px';

@mixin spacing($className, $styleName) {
  $i: 4;
  $j: 1;

  @while $i <= $max {
    #{$className   $j} {
      #{$styleName}: #{$i   $unit};
    }

    $i: $i $offset;
    $j: $j   1;
  }
}

// margins
@include spacing('.m-', 'margin');
@include spacing('.ml-', 'margin-left');
@include spacing('.mr-', 'margin-right');
@include spacing('.mt-', 'margin-top');
@include spacing('.mb-', 'margin-bottom');

// paddings
@include spacing('.p-', 'padding');
@include spacing('.pl-', 'padding-left');
@include spacing('.pr-', 'padding-right');
@include spacing('.pt-', 'padding-top');
@include spacing('.pb-', 'padding-bottom');

What I would like to add are margin-x, margin-y, padding-x and padding-y.

I figured adding the following would be a start, but once it gets into the actual "building" of the classes, it fails. The engine doesn't understand the second value being passed in the $styleName parameter. And I didn't find a way to do a forEach on the $styleName parameter, either.

@include spacing('.mx-', 'margin-left, margin-right');
@include spacing('.my-', 'margin-top, margin-bottom');
@include spacing('.px-', 'padding-left, padding-right');
@include spacing('.py-', 'padding-top, padding-bottom');

I would appreciate any help to get these new classes added into my existing mixin.

CodePudding user response：

OK, it wasn't as difficult as I was trying to make it. I changed the CSS property I wanted to address into an Array and then processed it with an @each rule within the @mixin body.

I was concerned that not having array notation around the singular property rules would cause a problem, but it doesn't seem to be causing any issues.

Here's the resulting code:

$max: 24;
$offset: 4;
$unit: 'px';

@mixin spacing($className, $styleName) {
  $i: 0;
  $j: 0;

  @while $i <= $max {
      #{$className   $j} {
          @each $prop in $styleName {
              #{$prop}: #{$i   $unit};
          }
      }

      $i: $i $offset;
      $j: $j   1;
  }
}

// margins
@include spacing('.m-', 'margin');
@include spacing('.ml-', 'margin-left');
@include spacing('.mr-', 'margin-right');
@include spacing('.mt-', 'margin-top');
@include spacing('.mb-', 'margin-bottom');
@include spacing('.mx-', ['margin-left', 'margin-right']);
@include spacing('.my-', ['margin-top', 'margin-bottom']);

// paddings
@include spacing('.p-', 'padding');
@include spacing('.pl-', 'padding-left');
@include spacing('.pr-', 'padding-right');
@include spacing('.pt-', 'padding-top');
@include spacing('.pb-', 'padding-bottom');
@include spacing('.px-', ['padding-left', 'padding-right']);
@include spacing('.py-', ['padding-top', 'padding-bottom']);

CodePudding user response：

Example using for loop

@for $i from 1 through 5 {
  .m-#{$i} {
    margin: #{$i * 4}px;
  }

  .mt-#{$i} {
    margin-top: #{$i * 4}px;
  }

  .mx-#{$i} {
    margin-left: #{$i * 4}px;
    margin-right: #{$i * 4}px;
  }
}

Similarly you can do the same for everything you want! Then you can using these classes wherever you want.

button {
  @extend .mt-2;
  /* OTHER STYLING */
}