Dreamweaver and CSS preprocessors

Using a CSS preprocessor to produce cleaner and easy-to-maintain CSS is fast-becoming a web design norm. Specifically, if you are creating large websites that reference a number of CSS files, using CSS preprocessors like Sass, Less, or SCSS can reduce a lot of manual coding and copy/paste.

If you are not familiar with CSS preprocessors, have a look at these really simple blogs to ramp up on these concepts:

Dreamweaver CC 2015 and CSS preprocessors

In Dreamweaver CC 2015 and earlier CC versions, you could use Sass, Less, and SCSS files with Dreamweaver. However, you had to compile these files yourself outside of the Dreamweaver application.
Your workflow would have been something like the following:

1.Download and install a compiler.
2. Set up a grunt (Gruntfile.js) job for the compiler to read your Sass/Less/SCSS file.
3. Set up another grunt job to compile the file into CSS, which you would then bring into Dreamweaver.

A simple 3-step process you might think, but this is something you would have to do every time you made a change in your Sass/Less/SCSS file. A supposedly simple workflow starts to feel tedious, isn’t it?

There are some other things you would have to take into consideration as well.

Consider this: If you are working with a number of sites, you have to set up a grunt job for each one of them. You also have to manually refresh the live view (content) of the markup linked to the compiled CSS, and manually construct site-specific compiler options/settings.

Dreamweaver CC 2017 and CSS preprocessors

In Dreamweaver CC 2017, CSS preprocessor support is built into Dreamweaver. What this means is that you can work with Sass/Less/SCSS files within Dreamweaver, and with a simple Ctrl+S or Cmd+S, Dreamweaver auto-compiles CSS for you. You can also manually compile individual CSS files using Tools > Compile (or F9). You can even see the change in real time in your browser! The changes are also reflected in all the open HTML files where this compiled CSS is linked or attached.

css-preprocessor-anime

Here’s how you can now set up Dreamweaver if, for example, you are working with a Sass file:

1. Install the compiler you want to use, for example Compass or Bourbon from within Dreamweaver (a one-click process) and set up your CSS preprocessor settings.
Note: You only need to do this if you wish to keep a copy of framework files (Bourbon), or generate default scss files and Ruby-based configuration file (Compass). Keeping a copy of the framework files is in general a good idea, so if in case certain mixins or functions from the authoring framework are removed in later revisions, you still have access to those in the preprocessor files within your site.
2. Make sure that auto-compile is enabled. If you do this, then just hitting Save updates the CSS files.
3. (Optional) You can see the changes getting reflected in Live view or Real-time Preview in all HTML pages where the generated css is used.

And that’s it. You have a powerful Sass workflow at your fingertips, without having to configure external JS files for compilation.

That’s the beauty of CSS preprocessor support in Dreamweaver!

For more information on CSS preprocessors in Dreamweaver, see Using CSS preprocessors in Dreamweaver.

Image credits: Shaleen and Saloni.