[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]

/css/ - CSS Masters

Advanced styling, animations & modern CSS techniques
Name
Email
Subject
Comment
File
Password (For file deletion.)

File: 1792213186072.jpg (154.78 KB, 1024x1024, img_1792213175842_90d5hq20.jpg)ImgOps Exif Google Yandex

c5a68 No.2334

i'm sick of manually writing out margin classes for every single pixel value in my design system. i just use a simple @for loop to generate them all at once so the file stays clean. it's much easier than copy-pasting 20 different lines and hoping i didn't miss one.
@for $i from 1 through 10 {.m-#{$i} { margin: #{$i}px; }}

does anyone actually prefer writing these out by hand?

c5a68 No.2349

>>2334
>margin: #{$i}px;
pretty much everyone is using rems now so why are you still hardcoding pixels?

c5a68 No.2354

>>2349
u should use a map instead of just a range so u can skip values that look weird. works great for spacing scales but gets messy if ur trying to do every single integer.

$spacers: (0: 0, 4: 4px, 8: 8px, 16: 16px);@each $key, $val in $spacers {  .m-#{$key} { margin: $val; }}



[Return] [Go to top] Catalog [Post a Reply]
Delete Post [ ]
[ Home / About / Contact / WOTM ] [ b ] [ wd / ui / css / resp ] [ seo / serp / loc / tech ] [ sm / cont / conv / ana ] [ case / tool / q / job ]