Post 23: What is compass?

Disclaimer:
Example is for Ubuntu 14.04

Compass is a CSS frame work. In the last post you could see how mixins help us creating writing code that covers different browser prefixes. For that purpose we could have use Compass instead too, because Compass contains tons of mixins.

Install compass:

sudo get-apt install ruby-compass 

I don't know whether this is sufficient for all of you, but I had to additionally run this in order for compass to successfully be installed on my computer:

sudo gem install compass

If it is run successfully you'll get this message:

Successfully installed compass-1.0.3 

Next you want to create a project: Open your terminal and go to a directory of your choice. Let's say our project is called "testCompass", then type in this:

compass create testCompass 

If it is successful you should find in your directory a folder called "testCompass". In that folder you'll find these:
Folder:

• sass 
• stylesheets 
• .sass-cache 

File:

• config.rb 

In order for compass to convert our compass file to a regular css file, we have to tell him that it should watch our compass file - similar we did with sass:

compass watch testCompass 

result:

Compass is watching for changes. Press Ctrl-C to Stop. 

Let's start with compass. Go to the folder "sass" in "testcompass". Open screen.css There you can read that you later should include the css file with this tag: The beauty is all what was shown in the previous posts (variables, functions (aka. mixins)) can be applied here too.

You can see all available functions here:

http://compass-style.org/reference/compass/ 

In order to include the functions, of let's say "border-radius" in the CSS3 just type in the head of the styleshee.scss file:

@import "compass/css3/border-radius/

or

@import "compass/css3

if you want to include all available functions in the css3 section. this way you can indlude all functions you'll find here:

http://compass-style.org/reference/compass/css3/

Example:

.box{
    @include border-radius(5px);
}

You can check that compass translated our code into css. Go to the folder "stylesheet" and open up the corresponding file "stylesheet.css": The result in css file:

.box {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}

Tip: In order to make your maine compass file cleaner, create a file "Base.scss" in the folder "sass". Write there all the imports, e.g.

@import "compass/reset";

@import "compass/css3";

Then go back to your main compass file, e.g. screne.scss and write:

@import "Base";

This means that the screne.css has access to the Base.scss file and includes everything that it finds in that Base.scss file. Do you know more best practices? Let me know!