Software Development

Simplify CSS maintenance and organization by using Sass

If you're considering transitioning your CSS to ​Syntactically Awesome Stylesheets (Sass), this overview provides information and demos that might help you make a decision.

sasspt1figa062014.gif

What is Sass?

Syntactically Awesome Stylesheets (Sass) is a CSS extension that adds nested values, variables, and in-line imports. In addition to mixins functions, it also helps to ease the problem of maintaining and organizing your CSS. Plus, it compiles your Sass code into properly formatted CSS. Its features as listed in the documentation are:

  • Fully CSS3-compatible
  • Language extensions such as variables, nesting, and mixins
  • Many useful functions for manipulating colors and other values
  • Advanced features like control directives for libraries
  • Well-formatted, customizable output
  • Firebug integration

The Sass Documentation Reference is a good place to start for more detailed information on features, syntax, CSS extensions, comments, rules and directives, expressions, and more.

Installing Sass

Sass can be installed on any major platform for Windows OS, Linux/UNIX, and OS X machines. I'll demonstrate how to install Sass on a Windows OS implementation, which will include installing Ruby and Compass.

Install Ruby

Ruby is the language that Sass uses to compile its code. The RubyInstaller for Windows is a self-contained Windows-based installer with several versions available depending on your Windows OS. Not sure which one to install? The RubyInstaller for Windows downloads page includes an archive of installers, 7-zip archives, ruby core and standard library documentation, development kits, and MD5 checksums, in addition to recommendations based on your situation and platform.

For this demo I used the rubyinstaller-1.9.3-p545.exe, which is a known stable version for Windows PC. (The 16MB installer file takes a few minutes to complete the download.) I changed the default install directory to D:\web\Ruby193 and followed the defaults for the remainder of the installation. Once installed, you'll get the following program applications and documentation.

  • Interactive Ruby
  • RubyGems Documentation Server
  • Start Command Prompt with Ruby
  • Documentation, which includes Ruby 1.9.3-p545 API Reference and "The Book of Ruby" (a PDF reference)

The RubyGems Documentation gets installed locally as a web page (Figure A).

Figure A

sasspt1figb062014.gif

Install Compass

Using the Start Command Prompt With Ruby program option, you'll use a short command line to install Compass (Figure B).

Figure B

sasspt1figc062014.gif

The command line is quite easy with the single line (the > symbol shown in the command line examples is the blinking prompt and should not be entered into your command line):

> gem install compass

The resulting command line interface output displays:

Fetching: sass-3.2.19.gem (100%)
Successfully installed sass-3.2.19
Fetching: chunky_png-1.3.1.gem (100%)
Successfully installed chunky_png-1.3.1
Fetching: fssm-0.2.10.gem (100%)
Successfully installed fssm-0.2.10
Fetching: compass-0.12.6.gem (100%)
Successfully installed compass-0.12.6
Installing ri documentation for chunky_png-1.3.1
Installing ri documentation for compass-0.12.6
Installing ri documentation for fssm-0.2.10
Installing ri documentation for sass-3.2.19
4 gems installed

If you need help using Compass, within the same Ruby command prompt you can enter the command line:

> compass –h

The resulting output is displayed below:

Usage: compass help [command]

Description:
  The Compass Stylesheet Authoring Framework helps you   build and maintain your stylesheets and makes it easy   for you to use stylesheet libraries provided by others.

Donating:
  Compass is charityware. If you find it useful please make a tax deductable donation: http://umdf.org/compass

To get help on a particular command please specify the command.

Primary Commands:
  * clean       - Remove generated files and the sass cache
  * compile     - Compile Sass stylesheets to CSS
  * create      - Create a new compass project
  * init        - Add compass to an existing project
  * watch       - Compile Sass stylesheets to CSS when they change
Other Commands:
  * config      - Generate a configuration file for the provided command line options.
  * extension   - Manage the list of compass extensions on your system
  * frameworks  - List the available frameworks
  * grid-img    - Generates a grid background image.
  * help        - Get help on a compass command or extension
  * imports     - Emit an imports suitable for passing to the sass command-line.

  * install     - Install an extension's pattern into your compass project
  * interactive - Interactively evaluate SassScript
  * sprite      - Generate an import for your sprites.
  * stats       - Report statistics about your stylesheets
  * unpack      - Copy an extension into your extensions folder.
  * validate    - Validate your generated css.
  * version     - Print out version information

Available Frameworks & Patterns:

  * blueprint
    - blueprint/basic      - A basic blueprint install that mimics the actual blueprint css.
    - blueprint/buttons    - Button Plugin
    - blueprint/link_icons - Icons for common types of links
    - blueprint/project    - The blueprint framework.
    - blueprint/semantic   - The blueprint framework for use with semantic markup.
  * compass
    - compass/ellipsis     - Plugin for cross-browser ellipsis truncated text.
    - compass/extension    - Generate a compass extension.
    - compass/pie          - Integration with http://css3pie.com/
    - compass/project      - The default project layout.

Global Options:
    -r, --require LIBRARY            Require the given ruby LIBRARY before running commands.
                                       This is used to access compass plugins without having a project configuration file.
    -l, --load FRAMEWORK_DIR         Load the framework or extensions found in the FRAMEWORK directory.
    -L, --load-all FRAMEWORKS_DIR    Load all the frameworks or extensions found in the FRAMEWORKS_DIR directory.
    -I, --import-path IMPORT_PATH    Makes files under the IMPORT_PATH folder findable by Sass's @import directive.
    -q, --quiet                      Quiet mode.
        --trace                      Show a full stacktrace on error
        --force                      Allows compass to overwrite existing files.

        --dry-run                    Dry Run. Tells you what it plans to do.
        --boring                     Turn off colorized output.
    -?, -h, --help                   Show this message

Next, you should install the CSS parser. Using the Ruby command line interface, type in the following command:

> gem install css_parser

The resulting output is displayed below:

Fetching: addressable-2.3.6.gem (100%)
Successfully installed addressable-2.3.6
Fetching: css_parser-1.3.5.gem (100%)
Successfully installed css_parser-1.3.5
Installing ri documentation for addressable-2.3.6
Installing ri documentation for css_parser-1.3.5
2 gems installed

This command gets you two Ruby gems installed: the addressable 2.3.6 and the css parser 1.3.5.

Using Compass

Now we can load a Sass test, a Sass demo, or both using Compass to create a new project using the Ruby command line interface. In this example we'll enter the following command line into the Start Command Prompt With Ruby using this Sass syntax:

> compass create demo --syntax sass

This is the resulting output that appears in the command line interface:

directory demo/
directory demo/sass/
directory demo/stylesheets/
   create demo/config.rb
   create demo/sass/screen.sass
   create demo/sass/print.sass
   create demo/sass/ie.sass
   create demo/stylesheets/ie.css
   create demo/stylesheets/print.css
   create demo/stylesheets/screen.css

*********************************************************************
Congratulations! Your compass project has been created.

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/
css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>


ruby 1.9.3p545 (2014-02-24) [i386-mingw32]

With the demo files installed inside your default Ruby directory, you'll be able to confirm your base Sass installation. This becomes a starting point from which to build your websites using Sass.

Using Sass

Depending on where you have Ruby installed on your system and where your web root directory is located within your local directory path, you may need to alter the lines of code below a bit to ensure they're being called correctly for your specific project. You can always copy the Sass stylesheets directory structure to any other directory on your local or development environment.

Sass syntax

There are two options available for Sass syntax usage: an extension of CSS3 called Sassy CSS (SCSS), and the older indented syntax known as Sass. You can convert CSS files from either syntax to the other (Sass to SCSS, or SCSS to Sass) from the Start Command Prompt With Ruby by entering either of the sass-convert commands, as displayed in the two examples below.

Convert Sass to SCSS

> sass-convert style.sass style.scss

Convert SCSS to Sass

> sass-convert style.scss style.sass

Get Sass to work

Next, I'll install Sass from Ruby using the following command line in the directory where our demo files from Compass are installed.

gem install sass

To do this, I need to change our directory path in the command prompt to the sass installation. In this demo, the local directory path D:\web\demo is where I installed the Compass project, and it's displayed in Figure C from the Ruby command prompt.

Figure C

sasspt2figa062014.gif

To verify your sass is installed correctly, use the command sass -v from the sass directory as shown in Figure D with the resulting output verification.

Figure D

sasspt2figb062014.gif

Maptastic Maple is the latest Sass release as of March 8, 2014 and is still in effect as of this writing.

Create a demo project using SCSS syntax

I'll create a new demo directory using Compass with the SCSS syntax. In this example, the installation is from the web directory on my D drive using the following command:

D:\web>compass create demo --syntax scss

It's also shown in Figure E.

Figure E

sasspt2figc062014.gif

The resulting command prompt output displays the following supplemental information about the installation:

You may now add and edit sass stylesheets in the sass subdirectory of your project.

Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets.

You can configure your project by editing the config.rb configuration file.

You must compile your sass stylesheets into CSS when they change.
This can be done in one of the following ways:
  1. To compile on demand:
     compass compile [path/to/project]
  2. To monitor your project for changes and automatically recompile:
     compass watch [path/to/project]

More Resources:
  * Website: http://compass-style.org/
  * Sass: http://sass-lang.com
  * Community: http://groups.google.com/group/compass-users/


To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
<head>
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/
css" />
  <!--[if IE]>
      <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>

Sass is watching

Before editing our CSS, we need to tell Sass to automatically monitor any edits so that it will recompile the project edits in real-time. We'll use the following command from the D:\web\demo directory to make sure that Sass is watching for any CSS edits and will update the Sass file (our scss file is named screen.scss):

sass --watch sass:stylesheets

These two steps are also displayed in the command prompt in Figure F.

Figure F

sasspt2figd062014.gif

In this demo, I'll edit the "screen.sass" file located in the D:\web\demo\sass directory; any edits to this file will automatically update the screen.css file located in the stylesheets directory, D:\web\demo\stylesheets.

The default contents of the screen.css file are displayed below:

/*
  Welcome to Compass.
  In this file you should write your main styles. (or centralize your imports)
  Import this file using the following HTML or equivalent:
  <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

Next, using my text editor tool, I open the screen.css file located in the D:\web\demo\sass directory, make an edit, and save the file. Sass automatically updates the screen.css file (Figure G). It's that easy to make global edits to your CSS using Sass.

Figure G

sasspt2fige062014.gif

Also see

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

0 comments

Editor's Picks