My thoughts on sass and compass
I have heard of Sass and Compass a long time a go, and right after reading about it I got them setup on my MacBook, using LiveReload to convert the Sass code to CSS in combination with Compass.app which I used to create the appropriate files to work with compass. I used these two apps in order to avoid having to configure anything through the terminal.
However, now I do not use any of the above apps, and instead use CodeKit which provides all the functionality you need to work with Sass and Compass.
I started working on a personal project, and it is the first time I am really digging into Compass. As the project does not have any sort of deadline, I can afford to try and “brake the web” by trying every crazy idea, and do anything that Sass and Compass allows me to.
First step was getting the basic structure. In the documentation for Compass, you can see that it supports the blueprint grid system. Which can also be used to create liquid layouts for responsive design – a great feature that I discovered just after few hours of trying to create a compass function to convert the grid pixels to percentages:
@function reswidth($targetcol, $contextcol) {
$outwidth: 40px
@return percentage (($outwidth * $targetcol - $blueprint-grid-margin) /
($outwidth * $contextcol - $blueprint-grid-margin))
}
Of course you do not need to know about this function as the liquid grid give you that. But I share this just to give you an idea of how deep you can go with Compass. If I were to use the above function I would do something like:
#sidebar{
width: reswidth(3, 24)
}So that would give me the equivalent width of three columns on percentages.
Up to now in my project (which I started yesterday) I am using about 5 mixins and one other function, plus a dozen of variables. All of which makes CSS coding a lot more “logical”. Then finally, all these variables, functions and mixins, form the ordinary CSS files references in the HTML file (as usual)
I did not intent for this post to be a walk through of how to work with Sass and Compass but simply to give you a feel of how useful working with these frameworks is.