User Guide Cancel

Using CSS preprocessors in Dreamweaver

Search
  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site

 

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.25
  • LESS: 2.7.2
  • Compass: 1.0.3
  • Bourbon: 4.2.6
  • Bourbon Neat: 1.7.3
  • Bourbon Bitters: 1.2.0

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 2017 and CSS preprocessors

In Dreamweaver 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 2015 and CSS preprocessors

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

Adobe logo

Sign in to your account

Quick links

View all your plans Manage your plans

Legal Notices    |    Online Privacy Policy