Getting SASSy

I'm not an html/css person. I like processes, line by line debugging and compiling. Html and css are largely guesswork and pixel pushing. Browsers never implement standards the same way twice, so I end up researching new best practices all the time for everything.

That being said, you can‘t make a site without some markup and styling. That’s really what a site is, RIGHT?

My current fun project is this little node.js ditty using express. Express can start you a project using less-middleware. It's really neat and very easy. I had it set up, configured and was writing out styles lickety-split sort-of.

I had a few hiccups, and some co-workers started hassling me to stop using LESS. Here are their main arguments:

  1. COMPASS. Apparently the greatest library ever written, doesn't support less.
  2. Support. Even though LESS is popular seemingly because of being apart of Twitter's bootstrap, their github repo is awash in pull requests and issues. This screams “Poor Support.”
  3. Mixin Mixup. In less anything can be a mixin/extension here's some snippet for example:
LESSlink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}
SASSlink
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  @include error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

I personally like the idea of using dot notation for the mixins as less does. But couldn't it lead to some confusion? What if you had an element that was .error? Style extension can lead to the same confusion in less.

Compass'd

So I took a look and even though my project now has node/js stuff mixed up with gem/ruby stuff, it's a pretty nice little setup. I do have an extra step of installing the compass gem on new dev environments and an extra step to fire up compass watch, but I think it's a net gain against the on request compiling that less-middleware was doing.

So far, I'm extremely pleased and things are moving along with sass/compass quite smoothly.