DEV Community

Arkar Kaung Myat
Arkar Kaung Myat

Posted on • Edited on

Generating display and sizing utilities with SASS

#css #scss #webdev

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");
Enter fullscreen mode Exit fullscreen mode

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}; } }
Enter fullscreen mode Exit fullscreen mode

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 ... */
Enter fullscreen mode Exit fullscreen mode

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, );
Enter fullscreen mode Exit fullscreen mode

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; } }
Enter fullscreen mode Exit fullscreen mode

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 ... */
Enter fullscreen mode Exit fullscreen mode

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.

Feel free to suggest.

Top comments (0)