Using Sass and Compass for Drupal Responsive Design – Technical Examples

rwd sass compassYou can do lots of cool stuff with Sass and Compass. They make your responsive design project lively and easy to scale. You can take a part of raw CSS and rewrite it with SCSS. Just like in the sample below.

Here’s how the basic CSS looks:

.nav {
background: #131313;
border: 1px solid #fafafa;
}
.nav ul {
list-style-type: none;

}
.nav ul li {
margin: 0;
padding: 0;
display: inline;
background: #fafafa;
}
.nav ul li a {
color: #131313;
}

You can identify the CSS code that doesn’t look that great: hardcoded hex colors repeated in different places, selectorsget long and repetitive when you’re a few levels deep, repeated declarations in both the second and third rules.

Once you rewrite it with SCSS using Sass’ nesting support things improve:

.nav {
background: #131313;
border: 1px solid #fafafa;
ul {
list-style-type: none;
li {
margin: 0;
padding: 0;
display: inline;
background: #fafafa;
a {
color: #131313;
}
}
}
}

You can also work the hardcoded colors:

$lightgray: #fafafa;
$darkgray: #131313;
.nav {
background: $darkgray;
border: 1px solid $lightgray;

ul {
list-style-type: none;
li {
margin: 0;
padding: 0;
display: inline;
background: $lightgray;
a {
color: $darkgray;
}
}
}
}

Things look nicer now. You can also add those colors to more elements without having to memorize or copy/paste the hex value. And you can take advantage of some Compass features for common tasks. For instance, you can force the <ul> to be laid out horizontally:

$lightgray: #fafafa;
$darkgray: #131313;
.nav {
background: $darkgray;
border: 1px solid $lightgray;
ul {
@include inline-list; /* Yay! See below. */
li {
background: $lightgray;
a {
color: $darkgray;
}
}
}
}

Inline-list is a mixin from Compass that outputs the CSS necessary to make a list appear inline. This is what you basically get:

@mixin inline-list {
list-style-type: none;
&, & li {
margin: 0px;
padding: 0px;
display: inline; } }