Matrix Group loves Sass: Our Most Used Sass/Compass Features

If you aren’t using a CSS preprocessor, you’re doing CSS wrong. Here at Matrix Group we find that using a preprocessor makes our lives easier. Here are some of the features my peers and I love and actually use everyday.

What is a CSS Preprocessor?

http://sass-lang.com
http://compass-style.org/

@import “compass/css3”;

Love some CSS3? Browser pre-fixes got you tired of repetitive code? We’ll I certainly don’t miss them. Compass comes packed with a lot of awesome features/plugins. Using @import “compass/css3”; in your Sass, you get all the CSS3 fun without having to write rules for each browser.

Need a cross-browser gradient on that element? Just do this:

.mydiv {
	@include linear-gradient((#EEE, #ccc),top);
}

And you get this:

.mydiv {
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
background-image: linear-gradient(top, #eeeeee, #cccccc);
}

Subtle transitions are a nice touch and something I definitely use a lot:

.transition {
	@include transition-property(compact(all .3s));
}

Produces:

.transition {
  -moz-transition-property: all 2s;
  -webkit-transition-property: all 2s;
  -o-transition-property: all 2s;
  transition-property: all 2s;
}

( Protip: use with @extend – shown below – to apply this to multiple elements )

@extend

Does the following look familiar?:

.coolstylebro, .iwantthatstyle, .metoo, .whataboutme h2 { color: red; }

There’s an easier way to do that with Sass.

Just use @extend:

.ihavefloats { width: 100%; overflow: hidden; }
…
.metoo { @extend . ihavefloats; }

Gives you:

.ihavefloats, .metoo { width: 100%; overflow: hidden; }

Simple RGBA

one of my most loved CSS3 properties, I use rgba a lot. Sass makes it easy.

Ideally, you want to set up your color scheme in variables to use over and over in your styles.

Then you can do this:

$linkColor: red;
…
a { color: rgba($linkColor, 0.8); }

Need cross browser rgba backgrounds? There’s a compass plugin for that:
http://aaronrussell.co.uk/legacy/cross-browser-rgba-support/

& (The ampersand)

The Force is strong in the ampersand. This one guy wrote and article explaining why http://joeloliveira.com/2011/06/28/the-ampersand-a-killer-sass-feature/

Allow me to demonstrate:

.row {
	…
	. span3 { width: 30%;
		html.ie7 & { width: 25%; }
	}
}

Will give you:

.row .span3 { width: 30%; }
html.ie7 .row .span3 { width: 25%; }

Development, Maintainability and Performance

It’s all about teamwork. More often than not it’s also about some organization and file accessibility for multiple developers. Sass is here to help!

Break out your styles into as many components as you want. Prefix them with an underscore and the sass compiler will ignore it.

_base.scss
_header.scss
_home.scss
_interior.scss
_footer.scss
_whatever.scss
style.scss ( import all files here with @import “base” etc… )

get’s compiled into:

style.css (This is what serve up on production – a single server request gets you all your sites styles.)

All files can be active within a team at the same time and compiling happens in the background. Sass puts everything into a single place for your team – all on the fly. Focused, synchronous development FTW.

Responsive

This guy did a cool video:
http://theint.ro/blogs/outro/4686992-responsive-design-with-sass

No need to use Sinatra and here is what it looks like with the .scss syntax:

@mixin respond-to($media) {
	@if $media == 'mobile' {
		@media screen and (max-width: 640px) {
			@content;
		}
	}
}
...
.mobilelikesme {
	float: left;

	@include respond-to(mobile) {
		float: none;
	}
}

which becomes:

.mobilelikesme { float: left; }
@media screen and (max-width: 640px) {
	.mobilelikesme { float: none; }
}

Can also be used this way:

@include respond-to(mobile) {
	.widget { color: red; }

	.nav { margin: auto; }
}

output:

@media screen and (max-width: 640px) {
	.widget {
		color: red;
	}
	.nav {
		margin: auto;
	}
}

Excluding these tools from your workflow is crazy talk.

I personally started out using LESS(http://lesscss.org/) in the summer of 2011. I have since moved on to Sass and compass as my main front-end dev tools and I love ‘em.

Haven’t looked back.

If you use Sass, what’s your experience been?

Leave a Reply

Your email address will not be published.