Getting started with Sass/Compass and RockSolid Themes

Every RockSolid theme comes with Sass and SCSS styles in addition to the traditional CSS files. You can make any changes directly in the CSS. That means Sass is completely optional but you should check it out – you might like it. Sass can help you to achieve more in less time and make your life a little bit easier. Sass takes a lot of hassle out of webdesigns problems like vendor prefixes and complex media queries.

Choose: Compass.app or command line?

There are two ways to use Compass: Via command line or with a program offering a graphical user interface (GUI). We recommend using the command line, since its fast, reliable and stable. Besides that even beginners can handle it easily – although some may think they can't.

A: Install Compass via the command line

1. Step: Install Ruby

Compass respectively Sass need Ruby to run. Mac OS X includes Ruby by default, so you can skip this step if you are on a Mac. Sorry, Windows users – but don't worry this is short and sweet.

For Windows you can easily install Ruby using the RubyInstaller. So goto http://rubyinstaller.org/ and download the installer. Start the installation and make sure that Add Ruby executables to your PATH is activated. Keep to the install assistent and finish the installation.

Open the command line (terminal). Type gem -v into the terminal and press enter. You should see a version number e.g. 1.8.23. This confirms that the installation was successful.

2. Step: Install the Compass gem

Windows

Open the command line (terminal) and type the following line and press ENTER:

gem install compass

OSX

Open the command line (terminal) and type the following line and press ENTER:

sudo gem install compass

That’s it! You've completed the installation of Sass and Compass.

3. Step: Use Compass

To transform the .sass or .scss files into standard CSS open the command line and type the following line and press ENTER.

compass watch PATH/TO/FOLDER

You need to replace PATH/TO/FOLDER with the path of the sass or scss folder of the theme. After that compass watches the folder for changes and automatically generates the CSS files. If you're done with changing the Sass or SCSS go back to the command line press ctrl + C and exit the command line.

B: Install Compass.app

1. Step: Download Compass.app

Compass.app is available for Windows, OS X and Linux. Go to http://compass.kkbox.com/ and download the app. After the download you can instantly run the tool without installation.

2. Step: Use Compass.app

To convert .sass or .scss into CSS start Compass.app, click on the compass symbol in the info area of the startbar and then click Watch a Folder.... Pick the themes sass or scss folder and confirm by clicking o.k. Now Compass.app watches the folder for changes and automatically generates the CSS files.

Next: How to use the Sass and SCSS files of your theme

Your RockSolid Themes download package contains the folders contao/theme/files/THEME/scss and contao/theme/files/THEME/sass (replace THEME with the name of your theme). If you've installed the theme using the .cto file these two folders are already on your webspace (or local machine) in /files/THEME/. Each of the folders contains a config.rb configuration file that already contains the correct path settings and is preconfigured for you to use it. To translate the .sass or .scss files into CSS3 the following terminal command is all you need (we use SCSS in this case):

compass watch files/THEMENAME/scss/

While the command is running it will automatically save changes you make to the SCSS file into /files/THEMENAME/css.

Choose: Do you want to use Sass or SCSS?

Sass knows two different syntax. 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. Both variants offer the same feature set, only the syntax is different. You can choose whatever you like since RockSolid Themes come with Sass and SCSS included.

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.

Sass

Sass uses indention instead of brackets, semicolons are left out at all.

Sass example:

body
    color: #000
    +box-shadow(0 0 10px #000 inset)
    header
        color: #f00

SCSS

Scss is based on the CSS3 syntax. This means that every valid CSS3 stylesheet is valid SCSS as well.

Scss example:

body {
    color: #000;
    @include box-shadow(0 0 10px #000 inset);
    header {
        color: #f00;
    }
}

Info: Variables, functions and mixins

Colors

Most colors are defined at the beginning of the Sass/SCSS file. So you can edit the most important colors by changing only a single line.

The col() function

RockSolid Themes are based on a grid system that is built using 25 equally-sized columns in the desktop variant. The col() function helps you to handle the grid easily.

The functions takes two parameters:

1. The desired width of the element in columns
2. The width of the parent element in columns

Example

To make element a 15 columns, element b 10 columns and element c 5 columns the following Scss is needed:

/* Width: 15 columns, parent: 25 columns */
#a { width: col(15,25) }
/* Width: 10 columns, parent: 15 columns */
#b { width: col(10,15) }
/* Width:  5 columns, parent: 10 columns */
#c { width: col(5, 10) }
/* Width:  5 columns, parent: 15 columns */
#d { width: col(5, 15) }

/* Width: 15 columns, parent: 25 columns */
#a { width: 60%; }
/* Width: 10 columns, parent: 15 columns */
#b { width: 66.66667%; }
/* Width:  5 columns, parent: 10 columns */
#c { width: 50%; }
/* Width:  5 columns, parent: 15 columns */
#d { width: 33.33333%; }

#a, #b, #c, #d {
    min-height: 50px;
    font-size: 20px;
    background: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3) inset;
}
#d {
    margin-top: 5px;
}

<div id="a">A
    <div id="b">B
        <div id="c">C</div>
    </div>
    <div id="d">D</div>
</div>