Recently, I have been introduced to a fun technology called Sass. I’m not referring to some kind of “Developers Gone Wild” situation or programmers with attitude. I mean the stylesheet language started in 2007 called Sass (Syntactically Awesome Stylesheets). Developed by Hampton Catlin and Nathan Weizenbaum, Sass is a language that extends CSS3 and is interpreted by a Sass compiler into CSS for general use in a web project.

5 Simple Sass Techniques For Better Code

1.  Smarter Breakpoints

The smarter breakpoint is to use this pattern that comes comes from Susy, a framework for layouts and grids. Since Susy uses maps for layouts, on “susy-breakpoint” you can set layout map as an optional parameter. Nothing magic happens, but when you access other Susy functions (like gutter()) inside the breakpoint, it automatically returns the value based on your given layout map. The “smarter” breakpoint works the same, but with our custom function for fetching the map. It can even be a wrapper for susy-breakpoint if you use Susy (to use the same layout for both).

You can play around with the code to get how it works, but basically the mix gets “layout” as a parameter and overrides the global layout value by adding !global flag at the beginning. When you use your map function inside the breakpoint mix, the newly set value becomes the default value and you get the desired result. Before finishing the job, mix resets the default value, so outside of a breakpoint, the map function returns to default results again.

2.  The Use of Variables

Using Variables to store something like color or width and then using that through out your stylesheets. Here is an example of this technique.

3.  Nesting Code Blocks

Sass adds support for nesting code blocks. Rather than typing out

table {...}
table tr {...}
table tr td {...}

You can simply nest your selectors to achieve the same result, seen below.

table {
...
     tr {
     ...
          td {
          ...
          }
     }
}

This has to be my favorite feature of Sass as it has kept me from retyping the same selectors five times over to style a table or some small portion of a site.

4.  Mixing Capabilities

Sass is its mixing capabilities. Much like functions in server side languages, mixins allow you to define styles for certain elements that can be reused simply by referencing the name of the mixin. Check out this example from the Sass homepage.

@mixin table-base {
     th {
          text-align: center;
          font-weight: bold;
     }
     td, th { padding: 2px }
}
@mixin left($dist) {
     float: left;
     margin-left: $dist;
}
#data {
     @include left(10px);
     @include table-base;
}

You’ll notice in the mixin named “left” that Sass also allows arguments to be used in the mixin. This allows even greater flexibility, more logically organized code, and saving you even more time now and in terms of future changes.

5.  Selector Inheritance

Maybe you have a generic H1 element on your site with some styles attached to it. But then you also have an H1 used for blog posts that uses the class ‘post-title’. Instead of rewriting the styles from the generic H1 to H1.post-title, save yourself some time and use Sass’s Selector Inheritance. Check out the example below for better explanation.

h1 {
     font-size: 36px;
     color: #000;
}
h1.post-title {
     @extends h1;
     border-bottom:2px solid #000;
}

This neat little feature will save you from duplicating your styles for variants of your already styled elements.

In short, Sass, the Syntactically Awesome Stylesheet, adds the key features CSS has been missing to save you time and headaches with your stylesheets. Check out Sass at Sass-lang.com!

Leave a Reply

Your email address will not be published. Required fields are marked *

Read Related Posts