A young web designer’s introduction to SASS basics

SASS is a concept floating around the web design community that seems so abstract it’s hard to pin point exactly what it is and how it works. In this article I would like to break down some of the basic concepts in order to make the abstract concept more digestible for young web designers like myself.

SASS is a programming language that has been around for 11 years. SASS stands for semantically awesome stylesheets, and it is a CSS preprocessor that converts CSS data into another type of data.

SASS can be viewed as an extension of CSS with its own rules and its own hierarchy of information. SASS is more organized, clean, and dynamic than traditional CSS.

While SASS does have its own way to style elements, CSS styling can be implemented within the SASS file structure. This is called SCSS, which stands for sassy CSS. Basically, SCSS utilizes all of the major CSS features and is expanded to include SASS as well. This is where the ‘. scss’ files come into play when working with SASS.

This makes utilizing SASS relatively easy to implement for web designers familiar and comfortable with CSS. Even though SASS is technically SCSS, for the purposes of this article I will refer to this concept as SASS.

One of the most daunting parts of SASS is getting familiar with the file set up. Setting up files in SASS is done primarily in the terminal console. SASS is a Ruby language and is a Ruby gem. Since SASS is a Ruby gem, Ruby has to be downloaded, which can be done through the terminal.

I never used the terminal before using SASS. I understand from first-hand experience how intimidating and unapproachable this can make SASS at the beginning. However, just a little bit of practice with working within the terminal should be enough to make you understand it’s actually quite simple. All it takes is a little familiarity with commands.

All folders will exist within the sass folder. Start by creating a SASS file in the terminal:

mkdir sass

Then a file needs to be created and held in the sass file:

touch main.scss

Then create a base folder in the sass folder.

mkdir base

The following files will exist in the base folder. Create the files in the terminal with the touch command:

touch _layout.scss
touch _reset.scss
touch _typography.scss
cd (change directory) out of base folder and make a new variables folder:
mkdir variables

Now you will make folders that will hold variable stylesheets:

touch _colors.scss
touch _typography.scss

The final step is importing the partials into the main.scss folder. Go into the main.scss folder and add the following code:

//reset
@import “base/reset”;
//varibles
@import “variables/color”;
@import “variables/typography”;
//base
@import “base/layout”;
@import “base/typography”;

This is the order that the main.scss file should be in down the page. When importing a file, you don’t have to include the file extension because SASS will figure it out.

Above is a basic SASS file structure. Of course, as you get deeper into your SASS projects there will be more files. However, this is a really good place to start and get familiar with the terminal.

The major benefits of SASS are that is keeps code DRY. What does that mean? DRY stands for “Don’t Repeat Yourself”. This is done through SASS components. Some beneficial SASS components include variables, nesting, partials, mixins and more. I will go into further detail about some of the major SASS components below.

PARTIALS

Partials are SASS files that begin with an underscore. As you can see from the file structure above we created partials in our file structure. Partials are chunks of CSS that you can use in other SASS files.

VARIABLES

SASS variables store reusable information for a stylesheet. Variables can be colors, fonts, spacing or virtually any value designers want to reuse. These styles are values designers find themselves writing over and over again in CSS.

For example, if you have hex values of #262626, #aa5e6, #dbb1b5, and #80a389 littered throughout your CSS document, you probably have no idea what each color represents when you are just scrolling through the document.

What SASS allows you to do is define color variables.

$darkgrey: #262626;
color: $darkgrey;

This way, it is clear what color is being used in certain parts of the stylesheet.

Additionally, with SASS variables, any designer working on a project has access to a simple bank of reusable styles created by the design team. A major plus side of variables is maintaining consistent branding colors fonts and elements throughout a website. In fact, SASS makes your CSS overall easier to manage and update.

NESTING

Nesting allows for a hierarchy of information that is similar to HTML5. Nesting denotes a clear relationship between parent and child elements. HTML5, the powerful yet basic language, incorporates nesting rules, so it shouldn’t be too hard for designers to implement. In fact, nesting makes code more readable, approachable and organized.

For designers familiar with CSS, they know that CSS does not have any hierarchy or nesting rules, which makes CSS hard to organize and read over. The entire CSS stylesheet looks the same, which may be fine if you are looking over a stylesheet you created, but it’s challenging to decipher other web designer’s work. So for larger projects, SASS nesting makes large projects digestible through its clear hierarchy of information.

MIXINS

Mixins group CSS declarations into a single entity that is easily reusable on a site. In order to call the mixin you start with the @mixin directive and name the mixin. Then everytime you want to use the mixin you call it with @include. Mixins are very similar to Javascript functions because they exist in its own files and is called in.

In conclusion, SASS is a professional-grade design system that young web designers need to know before entering the professional world. The following image does a really great job of summing up SASS:

Picture found here.