design labs sass

SASS from a developer eyes

I enjoy writing CSS more than the average developer, and I like when I have tools that can help me write better code, be it CSS or regular programming. SASS is my favorite CSS pre-processor and I often see it be underused or misused. I am not a SASS master but I do have something to share about it.

SASS turns CSS into a programming language. It is still a language to describe presentation but you now have a lot of programming power.

Variables

It might be pointless to mention such a simple feature but this gives you the ability to reuse code, here is where you apply the simplest DRY to your CSS. Together with operations you have a much more flexible way of implementing your styles as well as maintaing it.

$base-font-size: 14px;
$header-font-size: $base-font-size * 1.5;
$small-font-size: $base-font-size * 0.75;
$font-color: rgb(0, 20, 20);

body {
  font-size: $base-font-size;
  color: $font-color;
}

h1, h2, h3 {
  font-size: $header-font-size;
}

.notes {
  font-size: $small-font-size;
}

@import

SASS imports are different from CSS imports. Whereas CSS imports will include a CSS file SASS will merge in into the current file, including all it’s mixins, functions and whatever SASS code you have. That is if you’re importing a SASS file. SASS will gracefully fallback to CSS imports if you do @import 'file.css'.
SASS also has partials, so if you have a file called ‘_style.scss’ this file will not be compiled to ‘style.css’, it will be only available on @imports, you can then import it with @import 'style' as you would normally, with the advantage of not having an extra compiled asset.

If you’re on rails you may be used to Sprockets’ //= require file. You shouldn’t use that, the best argument I heard for not using it is “sprockets requires are evil and will kill your cat”, I don’t remember who said that but it is true. If you use them you’ll have trouble re-using your mixins/functions/variables, you will lose track of the order the files are loaded, and you will most likely get confused by your css code. SASS imports are better than that, it will generate a single file for you, you’ll have your mixins available and in development you will also have a comment referencing which line generated that given CSS.

@mixin

Mixins are probably my favorite SASS feature and I believe it is the most widely used one. Mixins allow you to build reusable pieces of CSS and also parameterize them with arguments. You can remove a huge deal of repetition in your CSS by just using them.
For example if you want to draw a circle with a color and a radius:

@mixin circle($radius, $color, $border-width: 1px) {
  background-color: $color;
  border: $border-width solid darken($color, 10%);
  border-radius: 50%;
  height: $radius * 2;
  width: $radius * 2;
}

.my-circle {
  @include circle(100px, #3333ff, 2px);
}

.named-params {
  @include circle($radius: 50px, $color: red);
}

Will give you:

.my-circle {
  background-color: #3333ff;
  border: 2px solid blue;
  border-radius: 50%;
  height: 200px;
  width: 200px; }

.named-params {
  background-color: red;
  border: 1px solid #cc0000;
  border-radius: 50%;
  height: 100px;
  width: 100px; }

Regular programming features

As I said, SASS turn CSS into a programming language. @function, @for, @each, @if and @while bring a huge deal of flexibility to the language, if used properly they can be of great help when implementing flexible widgets. Let’s take a look at a simple example using some of them:

@function icon-url($name) {
  @return url(‘/assets/images/icon-#{$name}.png’);
}

$icons: (open close message comment);

@each $icon in $icons {
  .icon-#{$icon} {
    background: icon-url($icon);
    width: 32px;
    &:hover {
      opacity: 0.7;
    }
  }
}

@extend

Extend is also pretty useful when it comes to reusing existing widgets. They can be very brittle if you don’t use them correctly, you won’t be able to use @extend properly if you have a deeply nested hierarchy, but if you have a well structured SASS code you will be just fine. It is nice to use them with the %placeholders. Let’s write the previous example with the use of @extend.

@function icon-url($name) {
  @return url(‘/assets/images/icon-#{$name}.png’);
}

$icons: (open close message comment);

%icon {
  width: 32px;
  &:hover {
    opacity: 0.7;
  }
}

@each $icon in $icons {
  .icon-#{$icon} {
    background: icon-url($icon);
    @extend %icon;
  }
}

Wrapping up, I think everyone that writes CSS should actually be writing SASS, some people may claim to be writing SASS but if you just using nested selectors you are not. SASS is way more than nested selectors and variables. Read the manual, SASS has a great documentation.

Use Compass. Compass is freaking amazing, they cross-browser features for things like gradients is really useful, it will save you a huge deal of time. Take the time and read their docs as well.

Another cool feature from SASS is the ability to extend SASS using ruby. You get infinite possibilities, just try not to overuse any of the stuff mentioned here and it’ll be fine.

Related Articles