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

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, themable, and extendable CSS.

Dreamweaver supports the most popular CSS preprocessors: Sass and Less, and Dreamweaver also supports Compass and Bourbon frameworks for compiling Sass files.

Less is JavaScript based and Sass is Ruby-based but you don’t have to know anything about either of these languages or 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 if you have defined a site or not. Adobe recommends defining a site because having a site allows you the freedom to set up CSS preprocessor preferences, and also use the Compass and Bourbon frameworks within Dreamweaver. 

If you have a site defined, 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.

When you define a site, Dreamweaver also enables you to use Sass frameworks –Compass, Bourbon, Bourbon Neat, and Bourbon bitters within Dreamweaver.

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 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.

Keeping CSS preprocessor preferences site-specific allows you to manage your CSS preprocessors on a site basis, giving you control over each individual site CSS preprocessor, without having to update preferences every time you switch sites.

Set general CSS preprocessor settings

You can set the following general CSS preprocessor settings in the Sites > Manage Sites > CSS Preprocessors dialog. 

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 unselected, 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

Outputs a guessed unit in the CSS after the math. For example, 5px * 2px is compiled as 10px and not 10px2. 

When this option is disabled, Less attempts to guess the output unit when it processes the maths.

In this example, the CSS is generated as follows:

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

In this case, the guess is not correct - a length multiplied by a length gives an area, but CSS does not support specifying areas. Here, the assumption is that the user meant for one of the values to be a value, not a unit of length and Dreamweaver outputs 2px.

With strict units on, this generated CSS is considered an error.

Rewrite URLs as Relative URLs

Rewrites URLs in imported files so that the URL is always relative to the base imported file. So if a Less file imports another Less file, which in turn refers to an image, the relative URL is shown in the compiled CSS.

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).

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.

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

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

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 needs to be watched. Usually, this sub folder contains all your SCSS or LESS files. 

If you have enabled Compilation in the General settings, then Dreamweaver automatically triggers the CSS Preprocessor when any file within this 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. So if you create style sheets using Compass, then you can compile these style sheets and generate CSS files from within Dreamweaver.

  1. Install 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 on your machines, and have the Compass *.rb file setup, then from within 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. 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 don't have an existing configuration option, you can choose to specify them 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. It is relative to the project_path.

    Generated Images Directory

    The directory where generated images are kept. It is relative to the project_path. 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, then 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, then 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. So if you create style sheets using Bourbon, then 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 and this 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 store 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. In the Site Setup dialog box, select CSS Preprocessors > Source & Output.

  3. In the Source & Output dialog, 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 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.

  4. Specify the folder containing the Sass or Less files that Dreamweaver needs to "watch". 

    If you make changes to any of the files within this watched folder, 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), and the status icon in the status bar is displayed in green <icon>. To open the compiled CSS, you can double-click the success message in the panel.

If any errors are found, the CSS is not compiled successfully. The status icon is shown in red <icon> 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 generally docked at the bottom of the workspace. If the panel is closed, open it using Window > Output panel.

You can also toggle the Output panel (show/hide) using the status icon when it 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 may 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