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•15mo 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 Efe•15mo 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•15mo 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 Efe•15mo 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•15mo ago

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

Mert Efe•15mo 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•15mo ago

💯

Tenkes•15mo 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•15mo ago

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

Mert Efe•15mo 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•15mo 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?