Greetings
Here we are again , this time I tried to add more utils to my previous mini utility library .
display and sizing utilities with SASS
I need to generate display properties for my utils classes so here I am .
$displayProps: ("block", "inline-block", "inline", "flex", "grid","inline-flex", "inline-grid", "table", "inline-table","list-item", "none", "contents");
I can add more display properties but that's ok for me just now as usual I store the displayProps obj in my _variables.scss just so I can start generating.
Make sure you checkout all the previous articles just so you can see how I ended up here !.
Got a object to work with so it's time to generate utility classes with it .
So I started typing in my _utilities.scss to work with the object I got.
Here's the code and it was pretty simple.
@each $display in $displayProps {
.#{$display}{
display: #{$display};
}
}
I can just loop through the displayProps object and have to use some interpolation .
To generate my css class names dynamically I have to use sass interpolation . And I found out that I can even interpolate the whole property name !.
Then , I can finally check my generated CSS and it seems ok .
/* .. more and more ... */
.block {
display: block;
}
.inline {
display: inline;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
/* .. more and more ... */
Sizing utilities with SASS
For a utility base library I am gonna also need some sizing utility classes and so I have to work around some of those.
In my _variables.scss , I have to add some more classes
$dimensions :(
"full":100%,
"screen":100vh,
"min":min-content,
"max":max-content,
// more and more
"2/5": 40%,
"3/5": 60%,
"4/5": 80%,
"1/6": 16.666667%,
"1/3": 33.333333%,
"1/2": 50%,
"auto":auto,
);
Using the above object, I have to generate utility classes like w-full ,h-full,w-1/2,h-screen to work with just like tailwind ...
So In my _utilities.scss ,
@each $key,$dime in $dimensions {
.w-#{$key}{
width: $dime;
}
.h-#{$key}{
height: $dime;
}
}
Pretty s1mple hah man I am so glad.
Later in my index.css , I can see
/* .. more and more ... */
.h-full {
height: 100%;
}
.w-screen {
width: 100vh;
}
.h-screen {
height: 100vh;
}
.w-min {
width: min-content;
}
/* .. more and more ... */
Thank you and it is exciting to learn more about SASS with this personally !!!!
I am gonna try generate some grid layouts later in the series.
Top comments (0)