Note of a lazy typesetter on SCSS and Compass Framework

I make turnkey websites. Starting from the design, ending pouring on the hosting. And the part of this fascinating process that I dislike most of all is the layout of the design in HTML. It seems to be nothing complicated, but many routine things are very tiring. Therefore, I am constantly looking for interesting solutions in this area.

Not long ago, I started learning Ruby on Rails 3 and found a very interesting plugin for it: Compass . In fact, this CSS framework is independent of Rails, it can be used in other types of projects.

I'll tell you how Compass made my life easier.
')

SCSS

The first thing that the eye falls on is that the framework uses the SASS and SCSS languages. You can read about them on the home page of this project. In short, these are alternative languages ​​for writing style sheets. Of course, the output after compilation still leaves the most ordinary CSS, but the main advantage is that these languages ​​significantly speed up writing styles.

For myself, I chose SCSS, because it is familiar (its syntax is similar to that of regular CSS). This language gives the coder 4 superpowers:

1. Variables

Awesome thing! Only for the sake of it you can already go to SCSS. Imagine a situation: you impose a page on which the color of the frame of the blocks and the color of the links should be the same. And suddenly the customer says that it is necessary to make this color lighter.

.megablock { border-color: #A88; } .megablock a { text-decoration: none; color: #A88; } 

And you are looking for and changing this color throughout the stylesheet. And when using SCSS variables, this code can be lightened and made more flexible:

 $block-color: #A88; .megablock { border-color: $block-color; } .megablock a { text-decoration: none; color: $block-color; } 

Now, to change colors, you only need to change a single variable in the text. Moreover, mathematical operations can be applied to variables. For example:

 $border-color - #111 

2. Attachment

Another ryushechka, accelerating writing styles. How often have you had to write long selectors, like table.cart div span a ? In SCSS, you can nest selectors into each other:

 table.cart { width: 700px; div { float:left; span { font-size: 14px; a { color: $cart-link-color; } } } } 

Often it even makes it easy to read the code.

3. Mixins (Impurities)

And after all, you probably have to often write the same rules in different selectors, right? For example, rounding corners for all browsers. SCSS will allow you to save time here:

 #promo { background-color: $promo-bg-color; @border-radius(10px); } 

In this example, for the first time I am showing you some of the features of the Compass framework, since the “admixture” of the border-radius already included in the standard set of its capabilities.

4. Inheritance of selectors

Another pleasant thing that can not be ignored. In essence, it is similar to the previous one:

 .notification { border: 1px solid; margin: 0 auto; } .errorNotification { @extend .notification; background-color: #f11; color: #fff; } 

It is not hard to guess that when compiling the .errorNotification selector, all the rules from .notification will be included in it .notification

Compass framework

Well, now, actually, about the framework itself. Just look at his documentation to see how he can simplify the life of a web developer. A huge number of ready mixins, classes, tight integration with the CSS framework Blueprint.

To describe everything, of course, I do not have enough patience, but I will go over the main features of the framework.

Crossbrowser CSS3

In order not to write the rules for each browser (WebKit, Mozilla, etc.), the developers have included many tools for quickly writing CSS3 lotions. Gradients, rounded corners, shadows and more can now be created in one line.

Helpers

Compass also includes many helper tools. For example, if you want all headings to specify the same font, you can use headings(all) as the selector. There is also a ready-made tool for gluing the footer to the bottom of the page.

Hacks and Utilities

Yes, various hacks, designed to cope with cross-browser problems, are of particular value. Floats, clearfixes, lows, etc.
And as an example of a terribly useful utility: an admixture of link-colors() , which allows you to set 4 colors for all four link states in one line!

Blueprint

Separately worth mentioning is that Compass supports all classes of the CSS framework Blueprint immediately out of the box. Grids, typography, forms, buttons and everything else. For me personally, this was a huge plus, as Blueprint has long made it easier for me to design websites through ready-made classes, and bundled with Compass is becoming a powerful tool.

Total

But perhaps the main advantage of SCSS and Compass is that they are very simple and transparent. It took me no more than an hour to begin using the above benefits.
For Rails projects, I just don’t see any alternative. Although, if you're interested, you can try to use it in other environments.
If you also connect HAML, the page layout time on average decreases by a factor of 2-3! I think that no more arguments are required.