Using Compass and SASS for creating nice CSS

In this first blog post I will explain how to create a project with compass from scratch and initiating it on an existent project, installing, creating the necessary files and folders, and a small introduction on how to use compass to create a base css file with the defaults for your project.

Installation process:

# Note: You may need to run with sudo
$ gem update --system
    Updating RubyGems
    Updating rubygems-update
    Successfully installed rubygems-update-2.1.11
    Updating RubyGems to 2.1.11
    Installing RubyGems 2.1.11
    RubyGems 2.1.11 installed
    Installing ri documentation for rubygems-2.1.11
$ gem install compass
    Fetching: sass-3.2.12.gem (100%)
    Successfully installed sass-3.2.12
    Fetching: chunky_png-1.2.9.gem (100%)
    Successfully installed chunky_png-1.2.9
    Fetching: fssm-0.2.10.gem (100%)
    Successfully installed fssm-0.2.10
    Fetching: compass-0.12.2.gem (100%)
    Successfully installed compass-0.12.2
    Installing ri documentation for chunky_png-1.2.9
    Installing ri documentation for compass-0.12.2
    Installing ri documentation for fssm-0.2.10
    Installing ri documentation for sass-3.2.12
    Done installing documentation for chunky_png, compass, fssm, sass after 74 seconds
    4 gems installed

Creating a project from scratch.
Creating the necessary folder structure and config files on an existing project.

$ compass create --syntax scss --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"

If you already have a project going on you can always run the following command to create the structure for an existing project.

$ compass init --syntax scss --sass-dir "sass" --css-dir "css" --javascripts-dir "js" --images-dir "img"
    directory css/
    directory sass/
        create sass/screen.sass
        create sass/print.sass
        create sass/ie.sass
        create css/ie.css
        create css/print.css
        create css/screen.css

We are now good to go, we can compile the base SCSS files that we create initially with the compass install/create.

$ compass compile

This will show you all the list of files that were created, changed or unchanged from your sass folder to the necessary folders that we specified on our configuration file.
You don’t need to keep compiling your files every time you change one, on the root of the compass project ( where your config.rb is )

$ compass watch

When using “watch” you can set up some extra info for debug info and also based on the environment you are working on.


$ compass watch --trace --output-style compressed --no-line-comments
    Compass is polling for changes. Press Ctrl-C to Stop.
    Change detected at 00:04:08 to: screen.scss
        error sass/screen.scss (Line 6: File to import not found or unreadable: _vars.

    Load paths:
        overwrite css/screen.css

Lets now focus on on creating a list of vars that we will use along hour project for example the default font-family, font-size and color. This way when we have to redesign our application and change the font we will need to change it only in our “_vars.scss” file, and it will be spread to all the CSS that are aware of this with compass watch/compile.

// Base Font CSS Rules //
$base-size-px: 16px;

// Font family for titles and content that we want to highlight
$content_font: Verdana, sans-serif;

// Base Color
$color: #00FF00;

After creating the “_vars” files we will need to import it into to our project:

Editing screens.scss to load the files we need for our project,

/* 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:
//@import "compass/reset";
@import "_vars";
@import "_style";

In the sass folder we will create a “_style.scss” file with the following code.

Since compass will take all files in the sass folder, naming the file with “_” will make it ignored when creating the CSS files.

body {
    font-family: $content_font;
    color: $color;
    font-size: $base-size-px;
Compass is polling for changes. Press Ctrl-C to Stop.
Change detected at 10:38:56 to: _reset.scss
identical css/screen.css
Change detected at 10:40:18 to: _vars.scss
overwrite css/screen.css
Change detected at 10:40:21 to: _vars.scss
overwrite css/screen.css
Change detected at 10:40:35 to: _reset.scss
identical css/screen.css
Change detected at 10:41:06 to: _reset.scss
identical css/screen.css

And by taking a look at the CSS files generated

/* line 1, ../sass/_style.scss */
body {
  font-family: Verdana, sans-serif;
  color: lime;
  font-size: 16px;

On the next post I will be speaking on how to create Mixins and using sprites with compass.

When you expect more .. and get nothing

This week I went to see the movie “The Wolverine” I will risk to say the only Super Hero that I really like … maybe cause of all the burst into hanger look alike when things go against the idea original planned. Or maybe just cause …
Expectations quite high for this second movie of “The Wolverine”, based on one of the most iconic s adventures of the Wolverine … yes if I was to give a grade from 1 to 10 … I would not be able to give more than a 4 to “The Wolverine” … the movie started on a normal pace but then when they tried to fit all in a couple oh hours .. things go deeply wrong ….


So still a nice movie to watch on the Cinema  … but not as big as the first movie of “The Wolverine”


Working from home Experiences

Things that happen when working from home.

Fixing some bugs that probably I created when trying to understand the magic software that I have to touch every morning, someone knocks on the door.


Landlady‘ : I have a problem ..
Me: ( My heart stopped … :O WHAT DID I DO THIS TIME? )
‘Landlady’ continues: My computer is not connected to the internet could you take a look?
Me: Ahhhhhh Sureeee :P that should be easy to fix.

( Dam almost got a heart attack o_O )


Small update

Everybody like statistics, we all like to see numbers about something that happened and that can show more detailed information of a given time, sport .. EVERYBODY LOVES STATISTICS.

So do we :).

That’s why we decided to make our Google Reader Replacement with statistics.


Screenshot of the month of April : Number of articles fetch per day and month ( 2013 ) :)