<

[Last Call] Learn how to a build a cloud-first strategyRegister Now

x

Sass: The Syntactically Awesome Style Sheet

Published on
4,233 Points
933 Views
3 Endorsements
Last Modified:
This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.

Introduction

Using HTML and CSS to create a web page works well, but it lacks versatility that Sass offers. I’m not a Sass expert, but I have used it on a couple of projects and it’s pretty great. If you want to know more about Sass, how to install it and all that jazz, then check out the documentation site here.

There are two main ways to write Sass code: SCSS (Sassy CSS) and Sass. SCSS looks more like normal CSS because it uses curly braces and semicolons. However, Sass relies on whitespace to differentiate sections. For example, in SCSS you may write:
 
.caption {
  @include master-text
  font: {
    style: italic;
    size: 0.75em;
  }
  color: gray;
}

Open in new window


while in Sass you would write:
 
.caption
  +master-text
  font:
    style: italic
    size: 0.75em
  color: gray

Open in new window


In both cases, it compiles to the same CSS so it is really just a personal preference of how you would like to code. Don’t worry if you don’t understand what some of the above code means; by the end of this, you’ll have a better idea of how Sass works. Some of the main features I’ve found to be useful are variables, mixins and nesting. 
 

Koala

A tool that I have found useful to use with Sass is Koala. Koala is a gui application for Mac, Windows and Linux that will compile your Sass code into CSS. It can be configured to listen to your project folders and automatically compile any time you save your files. Koala also does error checking, so it’ll catch all your syntax mistakes as you go. The alternative to Koala would be using the command line. This isn’t all that bad, but I’ll take a nice GUI over the command line any day. I don’t Sass without Koala, and neither should you.

As a side note, all examples I provide will be using Sass syntax rather than SCSS syntax. However, I have posted another article here that goes over some more Sass using the SCSS syntax.

And here. We. Go.
 

Variables

No matter what programming language you use, variables are absolutely key. In Sass, variables allow for more flexibility and may make your life easier if you need to use a certain value in many places. For example, it’s useful to define a variable for a certain color that you use throughout your site. You can do that by using this notation to define the variable:
 
$main-color: #af0000

Open in new window

  And then call it again anywhere using this notation:

background-color: $main-color

Open in new window


This compiles to CSS as this:
 
background-color: #af0000;

Open in new window


Pretty cool, no?
 

Mixins

Mixins are essential if you want to adhere to DRY (Don’t Repeat Yourself) principles. On the main site for Sass, here’s what is said about mixins: “Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.” 

Here’s how it works:
 
=body-text
  font:
    family: Helvetica, sans-serif
    weight: 400
    style: normal
    size: 1em
  color: $bodyColor
  text-align: left

Open in new window

And then to call it in your code, use this:
 
body
  +body-text
  text-align: left

Open in new window


Then it compiles to this in CSS:
 
body {
  font-family: “Helvetica”, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1em;
  color: #000000; // or whatever $bodyColor is defined as
  text-align: left;
}

Open in new window


These allow a great deal of flexibility, because they allow you to easily change properties further down the road. Let’s say that you decide later on that you want a particular text style to be different, even if you’ve used classes as efficiently as possible, you may still have to change a property in multiple places. Whereas if you use mixins, you only have to change that property once and it updates across the whole style sheet.

As a side note, Koala is able to automatically prefix your CSS, so I personally have not needed to use mixins for prefixing. 

I have found mixins particularly helpful for doing broad declarations for text, and then calling that mixin wherever I need that set of text styles. For example, I may do something like this:
 
=masterText
  font:
    family: Helvetica, sans-serif
  color: #000
  line-height: 2rem

h1, h2, h3, h4, h5, h6, p
  +masterText

h1
  color: red
  font:
    size: 2rem
    weight: 800

//h2-p styles below this

Open in new window


This gives you a good amount of control over all your styles, and makes it very easy to make broad strokes to your whole site by changing one value.
 

Nesting

This concept is not too hard to understand, but if done wrong it could really mess things up. It’s main purpose is to help keep your code cleaner by allowing you to only have to scope each layer of your code once. What does this mean exactly? Well, maybe it would be easier to just show you. This is what you would normally have to write in CSS:
 
nav {
  position: fixed;
  width: 100%;
  height: 100px;
}
nav ul {
  background-color: #000;
  float: right;
}
nav ul li {
  display: inline;
  margin: 10px 25px;
}
nav ul li a:link {
  color: #fff;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
nav ul li a:visited {
  color: #fff;
}
nav ul li a:hover {
  color: #ff0000;
}

Open in new window


That’s a lot of wasted space and repetition! Here’s how it looks in Sass:
 
nav
  position: fixed
  width: 100%
  height: 100px
  ul
    background-color: #000
    float: right
    li
      display: inline
      margin: 10px 25px
      a
        &:link
          color: #fff
          transition: all 0.25s ease-in-out
        &:visited
          color: #fff
        &:hover
          color: #ff0000

Open in new window


Looks much cleaner, right? It will compile into the CSS you see above, but it looks much different here. The notation may look a bit confusing, but it’s actually pretty simple. You list the top-level tag and just keep drilling down. The ampersand is used to refer to the parent tag. So in this case, you can use it to easily do pseudo classes.

That’s the basics of Sass, and these are a few of the techniques that I use most often.

Stay Sassy Experts.
3
Comment
0 Comments

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Join & Write a Comment

In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Suggested Courses

Keep in touch with Experts Exchange

Tech news and trends delivered to your inbox every month