Skip to content

Instantly share code, notes, and snippets.

@lazabogdan
Last active August 30, 2024 00:40
Show Gist options
  • Save lazabogdan/3b0055250abf0920dd07 to your computer and use it in GitHub Desktop.
Save lazabogdan/3b0055250abf0920dd07 to your computer and use it in GitHub Desktop.
Sass sizing utility
// ----
// libsass (v3.3.2)
// ----
$sizer: 1rem;
$sizer-increment: 5;
$sizers: ();
@for $i from 1 through 20 {
$sizers: map-merge($sizers, (
$i * $sizer-increment: $sizer * $i * $sizer-increment
))
}
@each $prop, $abbrev in (width: w, height: h) {
@each $size, $length in $sizers {
.#{$abbrev}-#{$size} { #{$prop}: $length !important; }
}
}
.w-5 {
width: 5rem !important;
}
.w-10 {
width: 10rem !important;
}
.w-15 {
width: 15rem !important;
}
.w-20 {
width: 20rem !important;
}
.w-25 {
width: 25rem !important;
}
.w-30 {
width: 30rem !important;
}
.w-35 {
width: 35rem !important;
}
.w-40 {
width: 40rem !important;
}
.w-45 {
width: 45rem !important;
}
.w-50 {
width: 50rem !important;
}
.w-55 {
width: 55rem !important;
}
.w-60 {
width: 60rem !important;
}
.w-65 {
width: 65rem !important;
}
.w-70 {
width: 70rem !important;
}
.w-75 {
width: 75rem !important;
}
.w-80 {
width: 80rem !important;
}
.w-85 {
width: 85rem !important;
}
.w-90 {
width: 90rem !important;
}
.w-95 {
width: 95rem !important;
}
.w-100 {
width: 100rem !important;
}
.h-5 {
height: 5rem !important;
}
.h-10 {
height: 10rem !important;
}
.h-15 {
height: 15rem !important;
}
.h-20 {
height: 20rem !important;
}
.h-25 {
height: 25rem !important;
}
.h-30 {
height: 30rem !important;
}
.h-35 {
height: 35rem !important;
}
.h-40 {
height: 40rem !important;
}
.h-45 {
height: 45rem !important;
}
.h-50 {
height: 50rem !important;
}
.h-55 {
height: 55rem !important;
}
.h-60 {
height: 60rem !important;
}
.h-65 {
height: 65rem !important;
}
.h-70 {
height: 70rem !important;
}
.h-75 {
height: 75rem !important;
}
.h-80 {
height: 80rem !important;
}
.h-85 {
height: 85rem !important;
}
.h-90 {
height: 90rem !important;
}
.h-95 {
height: 95rem !important;
}
.h-100 {
height: 100rem !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment