How to correctly create a flow in SCSS for declaring margins , paddings like the tailwind?

An example:

.h {
  &-full {
    height: 100%;
  }

  &-1 {

  }

  &-2 {
    
  }
}

.h {
  &-full {
    height: 100%;
  }

  &-1 {

  }

  &-2 {
    
  }
}

Can someone provide example of how it should be best in scss to have a system for margins and paddings?

11 Replies

Kevin Powell•2y ago

I use a map with the sizes I want, and then loop over it to create margin and padding utility classes. I'm on mobile atm, but if you want an example I'll put one up tomorrow

Mert EfeOP•2y ago

@Kevin can you do that? I was going to ask you directly, since I was assuming you were doing like that It would be most appreciated

Kevin Powell•2y ago

$sizes: (
  100: .25rem,
  200: .5rem,
  300: .75rem,
  400: 1rem,
  // and so on
);

@each $size-name, $size-value in $sizes {
  .margin-#{$size-name} { margin: $size-value; }

  .margin-inline-#{$size-name} { margin-inline: $size-value; }
  .margin-inline-start-#{$size-name} { margin-inline-start: $size-value; }
  .margin-inline-end-#{$size-name} { margin-inline-end: $size-value; }

  .margin-block-#{$size-name} { margin-block: $size-value; }
  .margin-block-start-#{$size-name} { margin-block-start: $size-value; }
  .margin-block-end-#{$size-name} { margin-block-end: $size-value; }

// repeat for padding
}

$sizes: (
  100: .25rem,
  200: .5rem,
  300: .75rem,
  400: 1rem,
  // and so on
);

@each $size-name, $size-value in $sizes {
  .margin-#{$size-name} { margin: $size-value; }

  .margin-inline-#{$size-name} { margin-inline: $size-value; }
  .margin-inline-start-#{$size-name} { margin-inline-start: $size-value; }
  .margin-inline-end-#{$size-name} { margin-inline-end: $size-value; }

  .margin-block-#{$size-name} { margin-block: $size-value; }
  .margin-block-start-#{$size-name} { margin-block-start: $size-value; }
  .margin-block-end-#{$size-name} { margin-block-end: $size-value; }

// repeat for padding
}

of course, you can use left, top etc instead of the logical properties, and make shorter class names 🙂

Mert EfeOP•2y ago

@Kevin Can't I use like this below?

$heights: (
  "0": 0,
  "0-5": 0.5,
  "1": 1,
  "1-5": 1.5,
  "2": 2,
  "2-5": 2.5,
  "3": 3,
  "3-5": 3.5,
  "4": 4,
  "5": 5,
  "6": 6,
  "7": 7,
  "8": 8,
  "9": 9,
  "10": 10,
  "11": 11,
  "12": 12,
  "14": 14,
  "16": 16,
  "20": 20,
  "24": 24,
  "28": 28,
  "32 ": 32,
  "36": 36,
  "40 ": 40,
  "44 ": 44,
  "48 ": 48,
  "52 ": 52,
  "56 ": 56,
  "60 ": 60,
  "64 ": 64,
  "72 ": 72,
  "80 ": 80,
  "96": 96,
);

@mixin createUtilities($map, $utilityClass, $attribute) {
  @each $primaryKey, $val in $map {
    .#{$utilityClass}-#{$primaryKey} {
      #{$attribute}: #{$val};
    }
  }
}

// USAGE

@include createUtilities($heights, "h", "height");

$heights: (
  "0": 0,
  "0-5": 0.5,
  "1": 1,
  "1-5": 1.5,
  "2": 2,
  "2-5": 2.5,
  "3": 3,
  "3-5": 3.5,
  "4": 4,
  "5": 5,
  "6": 6,
  "7": 7,
  "8": 8,
  "9": 9,
  "10": 10,
  "11": 11,
  "12": 12,
  "14": 14,
  "16": 16,
  "20": 20,
  "24": 24,
  "28": 28,
  "32 ": 32,
  "36": 36,
  "40 ": 40,
  "44 ": 44,
  "48 ": 48,
  "52 ": 52,
  "56 ": 56,
  "60 ": 60,
  "64 ": 64,
  "72 ": 72,
  "80 ": 80,
  "96": 96,
);

@mixin createUtilities($map, $utilityClass, $attribute) {
  @each $primaryKey, $val in $map {
    .#{$utilityClass}-#{$primaryKey} {
      #{$attribute}: #{$val};
    }
  }
}

// USAGE

@include createUtilities($heights, "h", "height");

` which is better of doing it you think ?

Kevin Powell•2y ago

for sure 🙂 More automated, which is always good. you'll just need some units tacked on

Mert EfeOP•2y ago

thanks so much it worked im re-iterating on it now @Kevin kevin is best way to quickly become good at these things constantly practicing right?

Kevin Powell•2y ago

💯

Tenkes•2y ago

since all of your keys and values are identical, you would probably use list instead of map. so instead of

$heights: (
  "0": 0,
  "0-5": 0.5,
  "1": 1,
  "1-5": 1.5,
  "2": 2,
  ...
);

$heights: (
  "0": 0,
  "0-5": 0.5,
  "1": 1,
  "1-5": 1.5,
  "2": 2,
  ...
);

you would use this:

$heights:  0, 0.5, 1, 1.5, 2, ...;

$heights:  0, 0.5, 1, 1.5, 2, ...;

and you can loop over list as well..

Kevin Powell•2y ago

That's a good point, I didn't even notice they were the same 😅

Mert EfeOP•2y ago

yes actually I made it like this at the end

$heights: (
  '0': 0,
  '0-5': 0.5,
  '1': 1,
  '1-5': 1.5,
  '2': 2,
  '2-5': 2.5,
  '3': 3,
  '3-5': 3.5,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9,
  '10': 10,
  '11': 11,
  '12': 12,
  '14': 14,
  '16': 16,
  '20': 20,
  '24': 24,
  '28': 28,
  '32 ': 32,
  '36': 36,
  '40 ': 40,
  '44 ': 44,
  '48 ': 48,
  '52 ': 52,
  '56 ': 56,
  '60 ': 60,
  '64 ': 64,
  '72 ': 72,
  '80 ': 80,
  '96': 96,
);

$heights: (
  '0': 0,
  '0-5': 0.5,
  '1': 1,
  '1-5': 1.5,
  '2': 2,
  '2-5': 2.5,
  '3': 3,
  '3-5': 3.5,
  '4': 4,
  '5': 5,
  '6': 6,
  '7': 7,
  '8': 8,
  '9': 9,
  '10': 10,
  '11': 11,
  '12': 12,
  '14': 14,
  '16': 16,
  '20': 20,
  '24': 24,
  '28': 28,
  '32 ': 32,
  '36': 36,
  '40 ': 40,
  '44 ': 44,
  '48 ': 48,
  '52 ': 52,
  '56 ': 56,
  '60 ': 60,
  '64 ': 64,
  '72 ': 72,
  '80 ': 80,
  '96': 96,
);

it's the tailwindcss height palette i tried to re-imitate #{$attribute}: calc(1rem * (#{$val} / 4)); than assigned like this @Kevin hey kevin what font size do you prefer in VS code? Does it matter do you think for you so you can see all the code when font is small etc.

b1mind•2y ago

Please don't bump your posts if you have found solutions. This is better asked in #off-topic or something. Marking solved and closing*

Gaming

Programming

How to correctly create a flow in SCSS for declaring margins , paddings like the tailwind?