Generating display and sizing utilities with SASS

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.

Feel free to suggest.