Starting With Sass

Nov 11, 2015

The world wide web first came into existence in 1989 thanks to the almighty Tim Berners-Lee. Since then, the web has grown leaps and bounds. Websites are not just blogs and simple static websites. We have seen the growth of web apps in the past decade and more recently we see these web apps compete with native apps for overall usage. But do not get it twisted, we still use HTML and CSS to create our layouts! CSS is an awesome and easy way to style websites but sometimes it is lacking in features that current developers are in desperate need for. How do we solve this predicament.

Introducing Sass

Sass is a scripting language that is interpreted into CSS. Sass provides features that CSS doesn’t like Variables, Mixins, Operators and other functionality that is available in other object-orientated languages. These features makes CSS more dynamic and capable to create the complex web apps that are pertinent on the web today.

Installing Sass

Sass was built on top of Ruby, a programming language. That means we need to have Ruby installed into our OS to begin your journey with Sass.

Mac Users

Ruby is already pre-installed on Mac. If you want a quick and dirty way to install Sass, type the following in your terminal application.

sudo gem install sass

For security reasons, this way of installing packages is not recommended. Instead install Homebrew, a package manager that lets you install packages safely, by typing the following in terminal.

Now we can use Homebrew to install Sass by typing this into your terminal.

brew install sass

Window Users

Window users need to install Ruby. This can be done easily by using RubyInstaller. Once downloaded and installed, open your command prompt and type in the following.

gem install sass

Let’s Play With Sass!

Now that we have our development environment ready, we can start using Sass in our projects. Hopefully you have a CSS folder within your projects folder .In that folder, create a .scss file. Look at the structure below for an example.

We must navigate to the CSS folder’s location in your terminal/command prompt. Once there, we run this command

sass style.scss style.css

This will grab your Sass file, style.scss, and convert it into a CSS file called style.css. Note: You can name your Sass file anything you want as long as it has the .scss extension at the end. Likewise your outputted CSS file can be named anything you want as long as it has a .css extension at the end. For example…

/* This will work but obviously dont do this. */
sass fish.scss sushi.css

Sass can also watch your file for changes and output an updated CSS file when done. This is done by typing this in your terminal/command prompt

sass —watch style.scss:output.css

CSS files can be pretty large and it is an industry standard to minimize CSS files when pushing them to a production environment. There are many third-party minifiers but Sass cuts out the middle man and uses its own minifier. Earlier in the article, I mentioned converting your Sass file into a CSS file by typing sass style.scss style.css in your terminal/command prompt. To output a minified CSS file, type this into your terminal/command prompt.

sass style.scss style.css:compressed

What Does A Sass File Look Like?

Sass does not overcomplicate the syntax. It uses the same syntax as CSS with some additional syntax additions that are easy to understand and similar to other programming languages. But we don’t want to go through the whole process of installing Sass to write plain ol’ css! Lets go ahead and make use of the tricks that Sass provides.

Nesting

Nesting is exactly what it sounds like. With nesting, we can nest selectors within selectors. This gives our code a better visual hierarchy.

Keep in mind that you don’t want to nest every bit of code that you have since this can cause css specificity problems. I would advise to be cautious of where and how you nest.

Variables

One of the most requested features for CSS is Variables. Variables can be found in every programming language. They make it easy to store values to a specific string. With Sass we can now use variables.

This is a really simple example but lets analyze what this allows us to do. Now that we have a hex value assigned to this $green variable we can now call the variable, $green, anywhere in our Sass file and it will give us the exact green we are looking for without worrying if we have the correct color. Lets see a more common example.

With variables we can assure consistency by storing reusable code in handy and easy to read variables. This makes standardizing CSS much more manageable which is imperative in large, complex projects.

Mixins

With CSS, it is common to reuse styles from one element to another. Wouldn’t it be nice to group some of these often used styles and insert them into other elements. Mixins provide a way for us to reuse styles in a more semantic manner.

This code immediately becomes more semantic and manageable. Now we can reuse the big-text mixin and incorporate the styles attributed to it easily. Mixins also take arguments making them even more handy and powerful.

My last article on flexbox describes the need for prefixing your css properties. This is where something like a mixin comes in handy. In the below example we will create a Mixin that turns an element to a flex container and adds all the necessary prefixes to make the flex container work properly on as many devices as possible.

Control Directives

Developers are also able to use Control Directives to create conditional statements making our Sass files even more dynamic. With Control Directives we can add, assign or remove CSS properties to elements dynamically.

Import

Probably my favorite feature of Sass is the ability to import Sass files into each other. This is possible with CSS but it creates multiple HTTP Requests causing a slower overall load time of your web application. Sass solves this issue by enabling developers to combine as many sass files with only a single HTTP Request. This means we can create a maintainable code base. To do this Sass introduces Partials. Partials are Sass files with a leading underscore ex. _reset.scss. This tells Sass not to generate a stylesheet for the Partial. Instead we can now import the Partial into our main Sass file and that will generate a single stylesheet. This is what a file structure that incorporates Partials looks like.

With the introduction of Partials, we have seen an emphasis on Sass file structure. There are many different methodologies you can use to create an organized architecture with Sass but most methodologies incorporate folders within the main CSS folder. The name of the folders identifies what kind of Sass files are inside the folder.

The base folder could have basic elements styles, mixins and variables. The components folder could have the styles for elements that comprise larger sections of the user interface like the header, footer, sidebar. The templates folder would have styles that combine the components styles to create complete user interfaces. Remember, there are many ways you can structure your Sass files. Your decision should be based on what works with your team of developers and your web app. Check my resource list on the bottom of this article to learn more about Sass file structure.

Lastly…

Not all websites are meant to be full-blown web apps and CSS by itself can be used to create the same things you can with Sass. If your site is a relatively small project, it might not be useful to incorporate Sass. For myself I like to use Sass for all my projects whether big or small. This lets me create projects with an architecture that can scale with ease.