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.
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.
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.
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).
Using the Start Command Prompt With Ruby program option, you'll use a short command line to install Compass (Figure B).
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.
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.
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.
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.
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.
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.
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.
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.