What is Sass?

Sass is a software extension for a computer language called CSS. CSS stands for cascading style sheets and it is widely used by web programmers in order to create the aesthetics of a webpage. Think of CSS as the skin of a website or how a website looks aesthetically. CSS is not a true programming language like C++ or Javascript, which can use loops, logic (if statements) and databases. Although a lot of programmers have mastered the art of CSS, there are still a handful of programmers who are having great difficulty in maneuvering around it. CSS can become cumbersome as your website gets bigger. This is where Sass comes in.

So what is Sass and how does it help programmers who are working with CSS?

Sass is actually short for Syntatically Awesome Style Sheets. It is a language style sheet that is constructed by Natalie Weizenbaum and Hampton Catlin. More and more people are starting to ask what is Sass and what makes it different from other style sheets? Well, for one thing Sass is an extension that provides easier coding by separating newline characters and code blocks to separate rules. Sass is here to make the coding job easier through better coding organization and coding short cuts. (More and more computer languages are evolving to be simple but powerful and Sass is one of them.) This process of better organization and shortcuts within Sass is known as transpiling. Transpiling is the process in which the converted Sass codes are converted into CSS.  Browsers do not work with Sass directly, just like computers do not work directly with human written code (human written computer code has to be translated into machine code before computers can use it.) Instead, Sass is simply like a translator between a human and CSS, a translator who’s job it is to make the CSS programmer’s job easier.

Sass Features

In order to answer what is Sass we have to first understand its features. Examples below are written in SCSS syntax.

Variables

Sass makes use of what are call ‘variables’ in dealing with CSS. A variable is like a data container that contains a value or label. The advantage of a variable is that if a piece of information appears multiple times in a program, the variable that details that information only needs to be changed in one place.

$font-size-root: 16px;
$font-family: 'Roboto', sans-serif;

body{
	font-size: $font-size-root;
	font-family: $font-family;
}

Nesting

Sass also allows the power of ‘nesting.’ Nesting can be thought of as items that have a parent child relationship or a hierarchy. Unfortunately, CSS does not have this powerful feature of nesting, but Sass does.

.footer-info {
    font-size: 1rem;
    .footer_nav {
        display: inline-block;
        .menu {
            li {
                color: black;
                &:not(:last-child){
                    padding-right: 1rem;
                    margin-right: 1rem;
            }                
        }
    }
}

Partials

You can write Sass in many small files. Then they can be included in other Sass files.

Import

Sass Import is built on top of the current CSS @import. Sass will combine the file you want to import with the file you’re importing into and serve a single CSS file to the web browser instead of send HTTP request like CSS does.

@import '_navigation'; //This includes styles from _navigation.scss

Mixins

A mixin allows you to reuse some CSS declarations. To create a mixin you use the @mixin directive and give it a name.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(20px); }

Extend/Inheritance

Extend features allow you to share similar styles to many elements. CSS3 can support the DOM or the document object model as well, however, it does not fully allow inheritance. With the help of Sass, inheritance is achieved and It is done by placing lines inside of code blocks that utilizes @extend keywords and references. This extension of the selector’s attributes are applied to the calling selector.

%unstyle-list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menu {
	@extend %unstyle-list;
}

Operators

Sass supports standard math operators like +, -, *, /, and %.

article {
  float: left;
  width: 600px / 960px * 100%;
}

Sass Library

LibSass is the library file of Sass. This library contains all the pre-made mini programs that help in guiding programmers into creating new programs. The programmer then assemble these mini programs to create a whole new project. Think of libraries as car parts in a junkyard. If you wanted to build a used car you wouldn’t design, mold and assemble the starter for its engine. You would simply go to the junkyard and find a working starter. LibSass works much the same way.

In conclusion, many people may keep asking “What is Sass? And what does it do?” (you may even be asked this on job interviews.) If this is the case, then you can always remember that Sass is an extension that saves a lot of effort and heart ache when it comes to dealing with CSS.  CSS is fine when you are building a simple website, but as your get into more complicated websites Sass can be a real life savior!