Breadcrumb Content

Main Content

More Efficient with SaSS

April, 24, 2015 | CSS

That is a great time to learn CSS, we have a plethora of tools that can smooth out the learning curve and make life so much more pleasant. CSS-Preprocessors were met with some resistance during the early stages, and I was one of the frontend developers that held out briefly. Lesson 1 in the world of Web Development: if you are not willing to learn something new, you should quit immediately and get involved in something else. Lesson 2: I want to discuss how your workflow can become more efficient with SASS.

The CSS Language is quite intuitive during the initial stages. Eight years ago, it was even easier to learn, but a pain in the ass to use if you wanted something more than a design with straight lines. Think of rounded corners, drop shadows, text shadow and minor animations just to name a handful. You actually had to cut images to create those effects, now you just use CSS code. The evolution of this language has led to faster loading webpages without losing any of the aesthetics you can think of.

What a pre-processor like SaSS provides is the concept known as D.R.Y (don’t repeat yourself). In the process of having to edit 3000 lines of code you are bound to make mistakes. SASS changes all of that. Before we can jump into SaSS, we have to install it first. This can be achieved via command line for Linux, Mac and Windows. (BTW, I copied the installation codes from the Sass website at http://sass-lang.com/install ).

Linux

If you’re using a distribution of Linux, you’ll need to install Ruby first. You can install Ruby through the apt package manager, rbenv, or rvm.

sudo su -c "gem install sass"

Windows

Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer ( http://rubyinstaller.org/ ). It’s a single-click installer that will get everything set up for you super fast.

The installer will also install a Ruby command line powershell application that will let you use the Ruby libraries.

Mac

You already have Ruby installed, just check the version by accessing the Terminal.app in your Utilities directory and jot

ruby -v

Now to install Sass, just add the code shown below.

gem install sass

If that does not work, use this instead.

sudo gem install sass

Next, you want to verify the installation and version.

sass -v

If you are like me and prefer to download an application with a user interface, I got you covered as well. If you are familiar with Github, you can download and install Scout from http://mhs.github.io/scout-app/. Scout is free and comes instructions. However, the functionality can be limited compared to some paid applications like Compass.app which can be purchased at http://compass.kkbox.com/ for about $10. Fire.app is made by the same company, but it processes more than just Sass. You can purchase it at http://fireapp.kkbox.com/ for about $14. My personal favorite is CodeKit, which I use for all of my projects. This is also a paid application you can purchase at https://incident57.com/codekit/.

Starting a project is no problem, all you have to do is create a .scss file or change your .css file to .scss in your projects CSS directory. SaSS has two file extentions; the first is “.sass”, (which I prefer not to use) and scss. For this example we will use .scss because the syntax is very close to CSS. During the production process, every time you edit and save your .scss file, it will update the .css file (it generates) that is linked to your project files. Now, let’s take a look some of the features SaSS provides.

Variables

CSS is not an evil language, but it is highly repetitive, which will undoubtedly lead to errors. Let’s say you are working on a project with a set of base colors and shades. (see below)

  1. #1a2630 (base blue, [header, footer])
  2. #28aae1 (blue, hover)
  3. #e44d26 (base orange)
  4. #f16529 (base orange, hover)
  5. #151515(shade, black)
  6. #777777(shade, grey)
  7. #ffffff (shade, white)
  8. #f0f0f0(shade, off white)

In standard CSS you might use a cheat sheet, sticky notes or whatever method suits you to keep track of those colors. With Sass, you can covert them into variables with human readable names that is intuitive. (see below) Keep in mind, this is merely an example. In the course of setting up a framework, you might want to use more general variable names.

$base:#1a2630;

$base-hover:#28aae1;

$orange:#e44d26;

$orange-hover:#f16529;

$black:#151515;

$grey:#777777;

$white:#ffffff;

$offwhite:#f0f0f0;

The possibilities are many with variables. Outside of apply it to colors, and fonts you can alter the entire appearance of a project in minutes.

Nesting

As I mentioned before, CSS is very repetitive. Nesting provides a concept that will save you a great deal of time. The example below is a basic set of styles for a navigation menu.

 nav
{
  background: none; 
  position: relative; 
  min-height: 50px;
  padding:0px; 
  margin:0px; float: left; 
  width:100%;
}
  nav ul
 {
display: block; 
background: none; 
padding: 0px; 
margin: 0px; 
list-style-type: none; 
float:left; 
width:100%;
}

   nav ul li
{
list-style: none; 
display: inline-block; 
padding:0px; 
margin: 0px; 
position: relative;
 min-height:50px; 
border: none; 
min-width: 100px; 
width:25%; 
}

 nav ul li a
{
text-decoration: none; 
font-family:sans-serif; 
font-size: .8em; 
line-height: 50px;
text-align: center; 
color:#000; 
display: block; 
margin: 0px; 
padding: 0px;
  }

   nav ul li a:hover
 {
color:$#fff; 
background:#ff9900;
}

Here is the example with SaSS nesting.

 nav
{
background: none; 
position: relative; 
min-height: 50px;
  padding:0px; 
margin:0px; 
float: left; 
width:100%;

    ul
      {
   display: block; 
   background: none; 
   padding: 0px; 
   margin: 0px; 
   list-style-type: none; 
   float:left; 
   width:100%;
    }

     li
        {
     list-style: none; 
     display: inline-block; 
     padding:0px; 
     margin: 0px; 
     position: relative;
    min-height:50px; 
    border: none; 
    min-width: 100px; 
    width:25%; 
    }

      a
       {
        text-decoration: none; 
        font-family:sans-serif; 
        font-size: .8em; 
        line-height: 50px;
        text-align: center; 
        color:#000; 
        display: block; 
       margin: 0px; 
       padding: 0px;
     }

       a:hover 
        {
          color:$#fff; 
        background:#ff9900;
      }
} 

This feature helps you cut back on the amount of content you have to write, which also minimizes room for error. Once you save the document you are working on, its processed and produces a CSS document for your project. SaSS provides a great deal of features besides what I have listed above. The only thing left to do is go explore SaSS for yourself.

Mr. Blox

I dream in code, find conformity repulsive and drink excessive amounts of coffee...

Comments are closed.