DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,904 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for On my way to generate CSS utils with SASS .
Arkar Kaung Myat
Arkar Kaung Myat

Posted on • Updated on

On my way to generate CSS utils with SASS .

Well I eventually fall in love

with SASS after I tried several projects with it .

Also I am a fan of tailwind CSS so this is the blog about me trying learn more about SCSS while generating some utility classes with SCSS.

There is gonna be several episodes though out this way.

So lets get started

my apology first for my writing skill cause we all have language barriers.English is my second language.

We all love reloading

I thought that while building this thing , first thing comes to my mind is that would be nice if I don't have to refresh or reload manually every time I make changes to my files or compile my sass files.

After a few google searches , I found of course tons of methods I can use to setup my development server.

I found Gulp easy

No more chit chat dive into the code and I started with a blank HTML file and I called it index.

node modules !

npm init
npm install gulp 
npm install gulp-sass 
npm install sass
Enter fullscreen mode Exit fullscreen mode

I know its annoying

npm init
npm install gulp gulp-sass sass
Enter fullscreen mode Exit fullscreen mode

I waited a few seconds and it all works out perfectly well.

gulp file ?

I found out on the internet that I need to make a gulp file to tell gulp what I want !

In this case , I need the ability to launch a local development server that reloads every times I press
ctrl-s on my browser and of course compile my SASS.

Then I created a file called gulpfile.js in my project root which is basiclly a javascript and for some reasons they say I cannot rename it.

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();

function buildScss() {
    return src('./utils/**/*.scss')
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())
}

function watchTask() {
    watch(['./utils/**/*.scss'], buildScss)
    watch('./*.html').on('change', browserSync.reload)
    browserSync.init({
        server: './'
    })
}

exports.default = series(buildScss, watchTask)
Enter fullscreen mode Exit fullscreen mode

Lets break down a bit of this code

const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const browserSync = require('browser-sync').create();
Enter fullscreen mode Exit fullscreen mode

Of course a little bit of imports and

function buildScss() {
    return src('./utils/**/*.scss')
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())
}
Enter fullscreen mode Exit fullscreen mode

This is the part responsible for compiling my SCSS files that I put them in one of my project folder called utils.

'./utils/**/*.scss'
Enter fullscreen mode Exit fullscreen mode

double asterisks to make sure my SCSS files accessible in all sub folders inside utils and *.scss to make sure I include every SCSS files.

According to docs

Using code over configuration, utilize all of JavaScript to create your gulp file where tasks can be written using your own code or chained single purpose plugins.

I can chain my plugins or things I want to do .

   return src(Γ­ndex.scss)
        .pipe(sass())
        .pipe(dest('css'))
        .pipe(browserSync.stream())
Enter fullscreen mode Exit fullscreen mode

I put the input SCSS file and gently requested to output them in the folder called CSS and make sure its streaming !!

   function watchTask() {
    watch(['./utils/**/*.scss'], buildScss)
    watch('./*.html').on('change', browserSync.reload)
    browserSync.init({
        server: './'
    })
}

Enter fullscreen mode Exit fullscreen mode

Compiling SCSS is now ok and I also have to watch the HTML files to reload every I edit them also and later initialized the browserSync right at my project's root folder.

Export the modules , build and watch straight in the series.

exports.default = series(buildScss, watchTask)
Enter fullscreen mode Exit fullscreen mode

Later that I can finally start my development server which fit my needs for the project.

I prayed and typed in

gulp
Enter fullscreen mode Exit fullscreen mode

Oh well not bad it's happening πŸ˜‚.

Till now I got an ideal that would be great if I save this as I SASS , gulp starter kit and I uploaded this on my GitHub with a branch and you can check out here.

On my way to generate my utils

After setup it's time for me to generate my very first utility classes.

Color utility classes

With no doubt, I created a file called _variables.scss in my utils folder to store all my base variables like my base color palette, base padding and margin just so I can use them from my various SCSS modules.

Notice here I have to name my variable file start with underscore to tell SASS that I don't want to generate separate CSS file like variables.css in the output folder.

Here comes my color palette that's I store from bootstrap .

   $clr-primary: hsl(211, 100%, 50%);
   $clr-secondary:hsl(210, 8%, 46%);
   $clr-success: hsl(133, 62%, 41%);
   $clr-danger: hsl(354, 70%, 54%);
   $clr-warning:hsl(45, 99%, 51%);
   $clr-info: hsl(188, 78%, 40%);
   $clr-light : hsl(220, 27%, 98%);
   $clr-dark:hsl(213, 9%, 23%);
   $clr-white:hsl(0, 0%, 100%);
Enter fullscreen mode Exit fullscreen mode

I put them all in SCSS variables and thinking a way to transform them to utils classes like text-primary-100, text-danger-800 which basically like tailwindCSS.

$colors : (
    "primary":$clr-primary,
    "secondary":$clr-secondary,
    "error":$clr-danger,
    "warning":$clr-warning,
    "info":$clr-info,
    "light":$clr-light,
    "dark":$clr-dark,
    "white":$clr-white,

    "black":hsl(0, 0%, 0%),
    "red":hsl(0, 100%, 50%),
    "blue":hsl(240, 100%, 50%),
    "green":hsl(120, 100%, 25%),
    "yellow":hsl(60, 100%, 50%),
    "orange":hsl(39, 100%, 50%),
    "purple":hsl(300, 100%, 25%),
    "gray":hsl(0, 0%, 50%),
);

Enter fullscreen mode Exit fullscreen mode

Then I add more SCSS object in my variables to generate more color like tailwind.

_color.scss

Created another file called _color.scss to do all the looping and generating process.

   @use 'variables' as *;

   @each $key,$val in $colors {
    .text-#{$key}{
        color : $val
    }
    .bg-#{$key}{
        background-color:$val
    }

    .text-hover-#{$key}{
        &:hover{
            color: $val;
        }
    }

    @if($val != white ){
        @for $i from 1 through 9{
            .text-#{$key}-#{100 * $i}{
                color: mix( white,  $val,  $i * 10);
            }
            .bg-#{$key}-#{100 * $i}{
                background-color: mix( white,  $val,  $i * 10);
            }
            .text-hover-#{$key}-#{100 * $i}{
                &:hover{
                    color: mix( white,  $val,  $i * 10);
                }
            }

        }
    }

}



Enter fullscreen mode Exit fullscreen mode

To soften color like tailwind I can use SCSS's build in function like mix to mix with the color I want .

mix(first_clr,second_clr,%)
Enter fullscreen mode Exit fullscreen mode

In my case , I want to play around with lightness so I mixed it up with color white and cool I got what I wanted !!!

I have to make some conditioning to make sure I don't have classes like text-white-200 that would be dumb right?

Make sure you also check for black if you are playing with darkness πŸ˜‚

Pretty cool and I am loving the generated css popping up in my file.
And I tried using the classes in my HTML.

Thank you for your time just sharing my journey.

feel free to suggest.

I am gonna try spacing utils soon.

Top comments (1)

Collapse
 
sroehrl profile image
neoan

I remember it fondly when Sass finally clicked for me. Check out gaudiamus-css to dive even deeper.

🌚 Life is too short to browse without dark mode