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 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.
- 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.
- 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.
- 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.
- Set up auto compilation or manually compile your Sass and Less files. For more information, see Compile CSS preprocessor files.
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.
You can set the following general CSS preprocessor settings in the Sites > Manage Sites > CSS Preprocessors dialog.
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.
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.
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).
- 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).
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.
You can set the following source and output CSS preprocessor settings in the Sites > Manage Sites dialog.
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.
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.
-
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
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
-
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.
- In the Site Setup dialog box, select CSS Preprocessors > Compass.
- Select the Use Compass check box.
- Click Specifying Ruby-based configuration file, and browse to the file location. Click Save when done.
Specifying an existing Ruby-based configuration file
Note:
This file must be located in your site root folder.
- In the Site Setup dialog box, select CSS Preprocessors > Compass.
-
Specify configuration options manually
If you don't have an existing configuration option, you can choose to specify them manually.
- In the Site Setup dialog box, select CSS Preprocessors > Compass.
- Select the Use Compass check box.
- 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.
- In the Site Setup dialog box, select CSS Preprocessors > Compass.
-
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.
-
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.
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
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.
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.
-
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.
-
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
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.
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.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.