Learn how you can work with and compile CSS preprocessor files within Dreamweaver.

CSS is a language that describes the style of an HTML document. CSS preprocessors compile code written in a preprocessed language to the most familiar CSS. Preprocessed language raises CSS to a level closer to a programming language.

Specifically, preprocessors allow you to use variables, mix-ins, functions, and many other techniques that
are not possible in CSS. Using CSS preprocessors, you can define everything once and reuse them repeatedly that results in maintainable and extendable CSS.

Using a CSS preprocessor, you can also produce cleaner and easy-to-maintain CSS. If you are creating websites that reference a number of CSS files, using CSS preprocessors like Sass, or Compass can reduce manual coding and copy/paste actions.

Dreamweaver uses a built-in Ruby-Saas compiler to compile the SCSS, LESS files. Dreamweaver also supports Compass, and Bourbon frameworks for compiling Sass files. 

LESS is JavaScript-based while Sass is Ruby-based. However, you do not have to know anything about either of these languages. Nor do you have to use the command line to compile the files into CSS. Dreamweaver auto compiles these files into CSS using the less.js JavaScript library, when you load, edit, or save these files.

Supported versions:

  • Sass: 3.4.20
  • LESS: 2.2.0
  • Compass: 1.0.3

How Dreamweaver handles CSS preprocessors

How Dreamweaver handles CSS preprocessors varies depending on whether you have defined a site. If you define a site, you can set up CSS preprocessor preferences, and also use the Compass and Bourbon frameworks from within Dreamweaver.

When you define a site, you can customize the way CSS preprocessors work within Dreamweaver by setting site-specific CSS preprocessor preferences. Setting site-specific CSS preprocessor preferences allows you to specify compilation options on a site basis. You can also customize the location of Sass and CSS files, and preprocessor options specific to each site.

Read on to know how to use Dreamweaver with CSS preprocessors:

Dreamweaver CC 2017 and CSS preprocessors

In Dreamweaver CC 2017, CSS preprocessor support is built in Dreamweaver. That is, you can work with Sass/LESS/SCSS files within Dreamweaver. A simple Ctrl+S or Cmd+S enables you to auto-compile CSS in Dreamweaver. You can also manually compile individual CSS files using Tools > Compile (or F9). The changes are also reflected in all the open HTML files where this compiled CSS is linked or attached.

Here is a high-level workflow of the tasks involved when using CSS preprocessors:

  • Install the appropriate compiler if you want to use Compass or Bourbon from within Dreamweaver. This installation is a one-click process. Set up your CSS preprocessor settings.

Install the complier only if you want a copy of the framework files (Bourbon), or if you want to generate default scss files and Ruby-based configuration files (Compass). Keeping a copy of the framework files is recommended. If certain mixins or functions from the authoring framework are removed in later revisions, you can still access the preprocessor files within your site.

  • Ensure that auto-compile is enabled. Then press Save to update the CSS files.
  • (Optional) View the changes getting reflected in Live view or Real-time Preview in all HTML pages where the generated css is used.

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 the Dreamweaver application.
Your workflow would resemble the following steps:

  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.

You must perform these steps every time you make a change in your Sass/LESS/SCSS file.

Note:

See this video tutorial to learn how you can enhance your CSS using preprocessors.

If you do not have a site defined, then you can choose to manually compile your Sass and LESS files. However support for Compass and Bourbon frameworks is not supported.

How to use CSS preprocessors in Dreamweaver?

Here is a high-level workflow of the tasks involved when using CSS preprocessors:

  1. Define a site in Dreamweaver. Ensure that the Sass or LESS file that you are trying to compile is included in the site root folder. If you have already defined a site and the Sass/LESS file is included in the site root, proceed to the next step. For more information on setting up a Dreamweaver site, see About Dreamweaver sites.
  2. Set preferences for CSS preprocessors (such as defining the location of generated CSS files). These preferences are site-specific. For more information, see Setting site-specific CSS preprocessor preferences.
  3. If you want to use specific frameworks, such as Compass or Bourbon, you can specify the settings for these frameworks. For more information, see: Using the Compass framework or Using the Bourbon framework.
  4. Set up auto compilation or manually compile your Sass and LESS files. For more information, see Compile CSS preprocessor files.

Setting preferences for CSS preprocessors

You can set site-specific preferences for CSS preprocessors using the Sites > Manage Sites dialog box.

Keeping CSS preprocessor site-specific preferences allows you to manage your CSS preprocessors on a site basis. This action also gives you control over the CSS preprocessor for each site, without having to update preferences every time you switch sites.

Note:

The settings in General, and Source & Output subsections are applicable for Ruby-Saas framework by default. 

To set the preferences for Compass, you must select the Use Compass check box in the Compass section. 

Set general CSS preprocessor settings

You can set the following general CSS preprocessor settings in the Sites > Manage Sites > CSS Preprocessors dialog box. By default, these settings are applicable for the Saas framework.

General CSS preprocessor settings
General CSS preprocessor settings

Enable Auto Compilation on File Save

Select this check box to enable auto compilation of CSS preprocessors. If you select this option, Dreamweaver automatically generates a CSS file when you save your Sass, LESS, or SCSS file. If this option is left deselected, you have to manually compile the files every time you make a change.

LESS options

Enable Strict Math

Processes only those math that is in parentheses. For example, (100px/25px) is successfully processed while 20% + 10% (without parentheses) is not processed. When this option is disabled, all math in the file is processed.

Enable Strict Units

Without this option, LESS attempts to guess at the output unit when it does maths. For example:

.class {
  property: 1px * 2px;
}

In this case, the length multiplied by length gives an area, but css does not support specifying areas. Dreamweaver assumes that the user meant for one of the values to be a value and not a unit of length.

With strict units on, Dreamweaver assumes it is a calculation error, and throws an error.

Rewrite URLs as Relative URLs

This option enables you to rewrite URLs in the CSS file that is generated so that the URLs are always relative to the generated file. 

Generate Source map

Creates a source map. Source map is a file that bridges the gap between high-level languages like Sass and LESS, and the low-level language they compile to, such as CSS.

Sass/SCSS options

Output File Style

Specifies the style of the CSS output file:

  • Nested - Formats the compiled CSS in the well-known, modular structure.
  • Compact - Formats the compiled CSS in a compact structure that takes up less space than Nested or Expanded.
  • Compressed - Outputs the CSS in a flat structure.
  • Expanded - Outputs the CSS in an expanded manner with each property and rule taking up one line. Properties are indented within the rules, but the rules are not indented in any way. 

Create Source Comments

Creates comments in the output CSS file that maps the CSS code to the line from which it was generated.

Generate Source map

Creates a source map (file that bridges the gap between high-level languages like Sass and LESS, and the low-level language, they compile to, such as CSS). 

Set CSS source and output preferences

You can define where the generated CSS files should be placed, and the path Dreamweaver should watch and trigger auto compilation, when a Sass/LESS file in the path is modified using an external editor.

Note:

By default, the options in the Source & Output section is applicable for Saas. To enable these options for Compass, you must select the Use Compass check box in the Compass section.

After you modify these settings and install Compass, all the settings are migrated to config.rb. Later, if you want to modify any settings, directly edit the settings in the config.rb file. Also, changes made in the Site Settings dialog box do not affect the compilation.

Set Source & Output settings for Compass
Set Source & Output settings for Compass

You can set the following source and output CSS preprocessor settings in the Sites > Manage Sites dialog.

Source and output CSS preprocessor settings
Source and output CSS preprocessor settings

CSS Output

Specify the location of the CSS output file that is generated.

In the same folder as source

Select this option if you want the generated CSS files to be saved in the same folder as the source Sass and LESS files.

Define output folder

Select this option and specify a folder where you want to save the generated CSS files.

Replace segment of input path

This option allows you to replace a portion of the path using the From and To strings. For example, on setting From: scss and To: css, the output file is placed inside the same tree structure after replacing SCSS in the path css.

Source Folder

Specify the sub folder within the site root that has to be watched. Usually, this sub folder contains all your SCSS or LESS files. 

If you have enabled Compilation in the General settings, Dreamweaver automatically triggers the CSS Preprocessor. Dreamweaver triggers autocompilation when any file within the folder is modified externally, or from within Dreamweaver.

Using the Compass framework

Compass is an open-source CSS Authoring Framework that allows you to create CSS3 style sheets using Sass.

Dreamweaver offers support to Compass. If you create style sheets using Compass, you can compile these style sheets and generate CSS files from within Dreamweaver.

  1. Use Compass files.

    If you do not have Compass already installed, you can install it from within Dreamweaver.

    In the Site Setup dialog box, select CSS Preprocessors > Compass. Select Use Compass and then click Install Files.

    Installing Compass files
    Installing Compass files

    All the Compass files and the *.rb config file is installed within your site folder, and you can see them in the Files panel.

    Installed Compass files
    Installed Compass files

  2. Specify an existing Ruby-based configuration file

    If you already have Compass installed in your computer, and have the Compass *.rb file setup, in the Dreamweaver Site Setup dialog, specify the path to the Compass *.rb file within the current site root.

    1. In the Site Setup dialog box, select CSS Preprocessors > Compass.
    2. Select the Use Compass check box.
    3. Click Specifying Ruby-based configuration file, and browse to the file location. 
    4. Click Save when done.
    Specifying an existing Ruby-based configuration file
    Specifying an existing Ruby-based configuration file

    Note:

    This file must be located in your site root folder.

  3. Specify configuration options manually

    If you do not have an existing configuration option, you can specify the configurations manually.

    1. In the Site Setup dialog box, select CSS Preprocessors > Compass.
    2. Select the Use Compass check box.
    3. Click Specifying Configuration Options manually. Specify the following configuration options, and click Save.

    The following fields get populated automatically, but you can change them according to your requirements:

    Note:

    All the paths selected in these options must be within the site root.

    HTTP Path

    The path to the project when running within the web server. Defaults to "/".

    Images Directory

    The directory where the images are kept. The directory is relative to the project_path.

    Generated Images Directory

    The directory where generated images are kept. This directory is relative to the project_path, and defaults to the value of images_dir.

    Fonts Directory

    The directory where the font files are kept.

    Relative Assets

    Indicates whether the compass helper functions should generate relative URLs from the generated CSS to assets, or absolute URLs using the http path for that asset type.

  4. If you have selected Enable Auto Compilation on File Save, in the Sites > Manage Sites > CSS Preprocessors dialog box, Dreamweaver generates a CSS file every time you save changes to your Sass files.

    You can also preview these changes in real time in your browser window. For more information on previewing your changes in real time in browser, see Real-time preview.

    If you do not want auto-compilation, you can manually compile a CSS file by doing one of the following:

    • Right-click the Sass, LESS, or SCSS file in the Files panel and click Compile
    • Click Tools > Compile to compile the current file.
  5. You can then attach your compiled CSS file to the HTML files in your site. For more information, see Link to an external CSS style sheet.

Using the Bourbon framework

Dreamweaver supports the Bourbon family of products. If you create style sheets using Bourbon, you can compile these style sheets and generate CSS files from within Dreamweaver.

The following Bourbon flavors are supported:

  • Bourbon - A simple and lightweight mixing library for Sass
  • Bourbon Neat - A lightweight semantic grid framework for Sass and Bourbon
  • Bourbon Bitters - Scaffold styles, variables, and structure for Bourbon projects

You can import the Bourbon framework by adding one of the following in your code:

  • @import "bourbon"  - to import Bourbon
  • @import “neat” – to import Bourbon Neat
  • @import “base” – to import Bourbon Bitter

Dreamweaver then uses the prepackaged version of Bourbon while compiling the preprocessor files.

Alternatively, you can install Bourbon framework files to your site so that further updates to Dreamweaver do not affect your compilation workflows. The Bourbon framework files are copied to your site. Bourbon is the framework that is used when compilation is triggered for any of the files that import the framework.

Install Bourbon, Bourbon Neat, or Bourbon Bitters files

To install Bourbon or any of its flavors:

  1. In the Site Setup dialog box, select CSS Preprocessors > Bourbon, Bourbon Neat, or Bourbon Bitters.

  2. Click Install Files to install the files in the specified site root folder location within your site.

    Installing Bourbon files
    Installing Bourbon files

    All the Bourbon files are installed within your site folder, and you can see them in the Files panel.

    Installed Bourbon files
    Installed Bourbon files

    If there is a failure, the errors are displayed in the Output panel (Window > Results > Output), and the status bar icon changes to red.

Compile CSS preprocessor files

You can compile CSS preprocessor files in one of the following ways:

Set up auto compilation of CSS preprocessor files

You can set up options within Dreamweaver to automatically compile changes done in a Sass or LESS file into its equivalent CSS. You can also specify the locations (within the site root) where you want to save the generated CSS.

  1. In the Site Setup dialog box, select CSS Preprocessors > General > Enable Auto Compilation on File Save.

    Enabling auto compilation
    Enabling auto compilation

  2. Click CSS Preprocessors > Source & Output.

  3. Specify the locations where you want to save your generated CSS files. You can choose one of the following options:

    In the same folder as source

    Select this option if you want the generated CSS files to be saved in the same folder as the source Sass and LESS files.

    Define output folder

    Select this option and specify the folder where you want to save the generated CSS files.

    Replace segment of input path

    This option allows you to replace a portion of the path using the From and To strings.

  4. Specify the folder containing the Sass or LESS files that Dreamweaver tracks. 

    If you make changes to any of the files within the folder that is tracked, Dreamweaver automatically compiles the files after you save them. 

    Source and output CSS preprocessor settings
    Source and output CSS preprocessor settings

    Note:

    Dreamweaver watches and compiles these files even if you make changes outside Dreamweaver (using a text editor, for example).

After a successful compilation, a message is displayed in the Output panel (Window > Results > Output). The status icon in the status bar is displayed in green. To open the compiled CSS, double-click the success message in the panel.

If any errors are found, it implies that the CSS is not compiled successfully. The status icon is shown in red, and the Output panel lists all the errors and warnings. You can double-click an error message in the panel to quickly jump to the erroneous line in the code. The CSS file is not compiled successfully until all the errors are resolved.

Note:

The Output panel is docked at the bottom of the workspace. If the panel is closed, click Window > Output panel.

You can also toggle the Output panel (show/hide) using the status icon, when the status is red.

After obtaining the compiled CSS file, you can link your web page to the style sheet. When you make any changes to CSS preprocessors, the corresponding compiled CSS files are automatically updated. The web page too is autorefreshed in Live View.

For more information on linking your web page to the style sheet, see Link to an external CSS style sheet.

Manually compile a CSS Preprocessor file

In some situations (such as if you have not defined a Dreamweaver site), you might want to manually compile a CSS preprocessor file.

In such scenarios, disable Enable Auto Compilation on File Save in the CSS Preprocessors > General panel of the Site Setup dialog.

To manually compile a CSS preprocessor, right-click the file in the Files panel, and click Compile.

Manually compiling CSS preprocessor files through the Files panel
Manually compiling CSS preprocessor files through the Files panel

You can also click Tools > Compile to compile the current file.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy