Lazy Layout on SCSS and Compass Framework

I make turnkey websites. From design to hosting hosting. And the most unloved by me part of this fascinating process 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 so long ago, I started learning Ruby on Rails 3 and found a very interesting plugin for it: Compass . In essence, this CSS framework is independent of Rails and 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 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 common CSS, but the main advantage is that these languages ​​significantly speed up the writing of styles.

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

1. Variables

Awesome thing! Only for the sake of it is it already possible to switch to SCSS. Imagine a situation: you are making up 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 would be 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 in the whole stylesheet. And when using SCSS variables, this code can be facilitated 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 just need to change one single variable in the text. Moreover, mathematical operations can be applied to variables. For instance:

$border-color - #111

2. Attachment

Another thing that speeds up the writing of styles. How often did you have to write long selectors, sort of table.cart div span a? In SCSS, you can nest selectors in each other:

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

Often this even makes it easier to read code.

3. Mixins (Impurities)

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

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

In this example, for the first time I will show you some of the capabilities of the Compass framework, since the “admixture” is border-radiusalready included in the standard set of its capabilities.

4. Inheritance of selectors

Another pleasantness 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 easy to guess that when compiling the selector .errorNotification, all the rules from.notification

Compass framework

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

To describe everything, of course, I will not have enough patience, but I will go through the main chips of the framework.

Crossbrowser CSS3

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

Helpers

Compass also includes many helper tools. For example, if you want to set the same font for all headings, you can use it as a selector headings(all). 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 deal with cross-browser problems are of particular value. Floats, Clearfixes, lows, etc.
And as an example of a terribly useful utility: an admixture link-colors()that allows you to set 4 colors for all four link states in one line!

Blueprint

Separately, it is worth mentioning that Compass supports all classes of the Blueprint CSS framework right out of the box. Grids, typography, shapes, buttons, and everything else. For me personally, this was a huge plus, since Blueprint has long facilitated the layout of sites for me thanks to ready-made classes, and bundled with Compass becomes a powerful tool.

Total

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