Setting up a SASS workflow

Setup SASS workflow

You need an editor, ruby(I will create a post on how to install this) installed on your pc You don’t need that development toolchain in ruby, uncheck it(ridk install) at installation. Want to see what editor and configuration I use head over to site

Installing SASS through ruby

Run gem install sass in the command line You can use the integrated terminal in vscode Check whether it is installed properly by

sass -v

Execute SASS

Change the present working directory to the folder where your SASS files stay. Then run the following command sass --watch sass:styles This starts watching scss files in the sass folder and converts them to valid css files and place them in styles folder.

If you create or edit a scss file in the sass folder or in any sub-folder, then that change will be detected by the compiler and does the job accordingly to the command we ran(in this case sass --watch sass:styles)

for example, sass/test.scss is compiled to styles/test.css and styles/test.css.map

Steps summary:

  1. Create a folder for eg., my-awesome-site

  2. In the CLI, cd to the folder created

    cd my-awesome-site
  3. create two folders sass and styles under my-awesome-site

    my-awesome-site
        — sass/
        — styles/
  4. create a file inside sass folder named for eg., main.scss and write the following code

    html {
        background: url(bgback.jpg);
        background-size: 300px 100px; 
    }
    .header{
        .hero-img{
            width:100%;
            background-size: cover;
        }
    }
  5. Run the following command in the cli

    sass --watch sass:styles

    (Don’t stop the command, leave it there)

  6. Then the css files for your scss code will be generated (check css folder, it’ll not be empty) and the compiler watches your files inside sass folder. So if you edit a .scss file, the compiler detect the change and generates new files. for eg, change the code in sass/main.scss file. And check the styles/main.css file

  7. If you want to stop the sass compiler executing in the CLI, press Ctrl + C.

Alternatives to CLI

If you think all these CLI stuff wastes your time, there are some alternatives. Some of them are: