Using Flexibility for MODX: Compass and Sass

What is Sass?

Flexibility uses Foundation and Foundation uses Sass to maintain its css framework. Sass is a stylesheet language that allows you to create a stylesheet using "variables, nesting, mixins and selector inheritance". All of which are explained well on the sass-lang.com website. Sass makes writing css quicker and more structured.

The idea is to make maintaining css as easy as possible and for any changes you make in your css to reflect consistantly across your various HTML objects. For example you can store a colour value in a variable and apply it to different styles, if it needs changing you only have to change it in one place. Or you can create blocks of styles that can be used in different places. Sass lets you do this, and much more.

What is Compass?

Compass is a css authoring framework that uses Sass. Compass builds on what Sass has to offer and adds lots more useful functionality. The Compass website is here.

You can get away without knowing anything about Sass or Compass and still use and adapt Foundation to your needs by making changes directly to the css files, but you could be missing out on the power that these tools offer you. I'm not sure yet, it may be that the Foundation framework is a finished product in terms of a wire framing tool, or it may be that I might want to adapt it for some reason and using Sass or Compass will accomplish that best.

Installing the components to use Sass with Foundation

You need Ruby installed on you machine to use Sass. ( I think there are other possibilities but I haven't looked at these)

The servers I use are Linux and I administer them through putty and cPanel. I can see from logging in to cPanel that Ruby is installed and available for me to use ( see under "Software & Services").

To get started you need to use the zurb-foundation "gem". You can install this on the command line or via cPanel. On the command line run:

gem install zurb-foundation

You should get feedback telling you what has been fetched and installed. It should have installed everything you need including Sass and Compass

Or, in cPanel you can go to "Ruby Gems" under "Software & Services" and install it from there. Here it will also tell you the path to your Ruby gems.

You can check if they are installed on the command like by typing:

[path-to-your-ruby-gems]/bin/sass -v
or
[path-to-your-ruby-gems]/bin/compass -v

Eg: /home/onsitenow/ruby/gems/bin/sass -v

Next we create a project. In the command line go to the directory where you want your project folder to reside and then run this command:

[path-to-ruby-gems]/compass create [project-name]  -r zurb-foundation --using foundation

The feedback you get when you run this command will include the following useful information:

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/

Using Sass

You edit your css in a Sass file which has the file type: .scss In this file you can write css but also programming language stuff like variables, if & else, for, each, while, functions etc plus the css specific functions like mixins, nesting, selector inheritance, parent reference (&) ( for things like hover) , placeholder selectors and @content ( a great way to work with media queries)

As soon as you save your .scss file a nicely formatted .css file is generated by Sass. This is done by running the Sass programme which watches for changes in the .scss file and as soon as it detects any it generates a new .css file. To do this run Sass with the following command:

/home/onsitenow/ruby/gems/bin/sass  --watch style.scss:style.css

The added bonus is that if you make any syntax errors with your Sass or the css then Sass will let you know.

So Sass adds lots of convenience to your writing of css but then Compass adds a whole new level of utility. Including, amongst many other things, making image sprites from folders of images, and assigning them to classes with the correct display css. Awesome!

Compass works in a similar way to Sass except you tell it to watch your project folder rather than the individual scss file:

/home/onsitenow/ruby/gems/bin/compass watch [path-to-your-project-folder]

You need to add the following bit of code at the top of your .scss file:

@import "compass";

So what can you do with Compass? Amongst other things Compass provides lots of pre-built mixins so it makes it really easy to add a whole load of css, including all the vendor prefixes, with just one line of code in your .scss file.

For example this line:

p {
  @include border-radius(25px);
}

Will produce this css:

p {
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  -ms-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius: 25px;
}

Compass also helps you with CSS3 transitions, making multi-image sprites, "vertical flow" (consitent spacing of text as you read down the page) and other utilities for setting the colours of links, contrasting text with it's background, replacing text with images and more.

You can discover more Compass awsomeness on the Compass website

Compass assumes that certain folders are in certain places, if you have your folders elswhere you can tell compass in a config.rb file in the root directory of your project. You can find all the configuration options on the Compass website.

There are lots of resources on the web to help you learn about the Sass and Compass, the ones I uses where the LevelUpTuts . I found their Sass tutorials easy to follow and in nice digestable chunks. I then moved on to watching their video tutorials on Compass.

Other resources:

"The latest in Sass and Compass & Beginner, Intermediate and Advanced topics": sassway.com

Modifying Foundation's css

Foundations main Sass file is app.css which consists a couple of includes and mostly of commented out lines. To change the default settings you have to comment out the main import line @import "foundation"; Then you need to uncomment the styles you want to modify, these are stored here:

/home/onsitenow/ruby/gems/gems/zurb-foundation-3.2.5/scss/foundation/components/modules

Compass also watches these files for changes. But it is not recommended to edit these files as they may be overwritten if you upgrade.

To make changes duplicate the _settings.scss file in the sass folder of your project and call it _foundation-overrides.scss (the underscore stops compass making a css file of it) and @import it into app.scss. You can then overwrite all the default variables settings in this file and add your own css.

If you are customizing the framework you will probably want to reference these resources:

• Foundation's instructions for customizing their css via Sass
• The default Sass variables for the Foundation css framework

Workflow with MODX and the Cloud

Currently MODX Cloud doesn't support Ruby so if you are developing on the cloud and want to customize using Sass and Compass you would need to create a project on a machine that has Ruby and then copy and paste the resulting css file on to the cloud.