Tips When Using Adobe Dreamweaver’s SASS/SCSS/LESS Compiling Feature

Posted on: Wednesday, February 28th, 2018

CSS can be a total pain to write. It is quite repetitive. The example below gives a clear picture of why you should be working with SASS.

section{
    background: #069;
    color: #fff;
}

section h2{
    font-size: 2em;
}

section p{
    font-size: 1em;
    line-height: 1.5em;
}

section p.colored{
    color: #ddffaa;
}

Now let’s compare this with SASS/SCSS to see how much more efficient we can be:

section{
    background: #069;
    color: #fff;
    h2{
        font-size: 2em;
    }
    p{
        font-size: 1em;
        line-height: 1.5em;
    }
    &.colored{
        color: #ddffaa;
    }
 }

SASS allows you to nest your CSS styles. The only issue is that browsers cannot read SASS. So you need to use this shorter syntax with a precompiler. The precompiler’s function is to read the shortened code, and rewrite it as plain CSS. Newer code editors have precompilers built into them, but you can also install them and run them in the background. Every time you save changes to a .scss file, the precompiler picks up on these changes and automatically reads, renders css, and prints it to a .css file for you. All you have to do then is put the compiled .css file to your server.

This can mean the difference between 10 hours of work, and 2-3 hours. It is life-saving for huge projects.

When using Adobe Dreamweaver, you may encounter a lot of trouble. I have on several occasions wracked by brains thinking the precompiler was not working. It turns out, it is sometimes very slow. While I frequently see responses in the Adobe forums that they “cannot reproduce the issues”, it does appear that the precompiler is quite buggy. What I do know for sure is that sometimes there is a lag of up to 8 or 10 seconds before the precompiler finishes rendering the CSS.

So if you try to put the CSS file to the server before it is done you will think nothing is happening. What is actually occurring is that you are putting the file before it is finished.

Something which I have found that helps is to have the Output window open. To do this, go to Window->Results->Output. Once enabled you should see this:

If you have auto-compiling enabled upon saving, now you will see the file appear in the output window as rendered and then it is safe to put the file.

This little tip can save you a lot of headache.