Introduction to Sass¶ ↑
Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well- formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
Please refer to the Sass documentation for further information about the syntax.
Introduction to Compass¶ ↑
Compass is an open-source CSS Authoring Framework.
Please refer to the Compass documentation for further information on how to leverage the powerful Compass framework.
Compass extensions¶ ↑
There are many extensions available for Compass. You can install and use as many of them together or just a single one depending on your use-case. Good examples for useful Compass extensions are “susy” (a responsive grid framework [susy.oddbird.net/]) or “compass-rgbapng” (a rgba() .png file generator) but there are many more.
Setting up and using Sass and Compass¶ ↑
Compass runs on any computer that has ruby installed.
Once you got ruby installed you can easily install the required gems from the command line:
$ gem update --system $ gem install compass
Any additional library can be installed in the same way:
$ gem install compass-rgbapng $ gem install susy
Once you have set up your environment you can navigate to the folder that holds your config.rb file.
The config.rb file is the configuration file that helps Sass and Compass to understand your environment. For example, it defines which folder your .scss or .sass files are stored in or where the generated .css files should be output to.
Executing the following command will constantly watch for any change in your .scss files and re-compile them into .css:
$ compass watch
You can also clear and recompile your .css manually:
$ compass clean $ compass compile
Barebones Sass Structure¶ ↑
The barebones CSS structure provided in this starterkit uses many of the ideas discussed in Jonathan Snook’s SMACSS and is intended to provide a starting point for building modular, scalable CSS using Sass and Drupal.
Multiple Sass partials are used to help organise the styles, these are combined by including them in styles.scss which is compiled into styles.css in the css/ directory.
All styles are included in order of specificity, this means that as you go down the document each section builds upon and inherits sensibly from the previous ones. This results in less undoing of styles, less specificity problems and all-round better architected and lighter stylesheets.
The file and directory structure contained in this folder looks something like this:
Top level files¶ ↑
These files are the main entry points for the Sass compiler and shouldn't directly contain any CSS code, instead they only serves to combine the Sass contained in the partials (see below) through @import directives.
nfl-team-base.styles.scss¶ ↑
This file aggregates all the components into a single file.
nfl-team-base.normalize.scss¶ ↑
This file provides a CSS reset/normalize generated based on the legacy variables.
nfl-team-base.hacks.scss¶ ↑
This file may be used to provide temporary hot-fixes for style issues that you plan to properly implement as components at a later point in time or simply don't have a proper solution for yet.
nfl-team-base.no-query.scss¶ ↑
This file re-renders the same contents as the styles.scss file but without any media queries. It can be used as a fallback for for older browsers that don't support media queries. You can find more information about this on the github repository of the breakpoint. Compass gem.
Partials¶ ↑
variables¶ ↑
This is where you place your Sass variables.
abstractions¶ ↑
This is where you place your functions, mixins and extends.
base¶ ↑
This is where you place all your basic, raw HTML element styling.
components¶ ↑
This is where you place your components.