Making the best out of your sass

Organizing your stylings with Sass

Mercedes Scenna

Getting to know SASS

Let’s start with the basics, SASS stands for Syntactically Awesome StyleSheets. It is a stylesheet language originally designed by Hampton Catlin and developed by Natalie Weizenbaum. It is Open source and coded in RubyNowadays this language has evolved greatly, it has been extended to with a SassScript, meaning you can write logics and conditions for your styling.

Talking about the web in general, optimizing %110 your website is the main premise: responsiveness, cross-browsing, page speed, images, fonts, and so on. Basically, every pixel, every second, every byte counts. So you have to bring the best out of the tools out there.

Starting to work with Sass is fairly quick, but you also need a compiler. No need to panic, there are lots of apps and preprocessor easily installable this days: Compass, Codekit, LiveReload. If you are used to working with the terminal, we recommend using Grunt; together with LiveReload make a great and effective team.

Like the Sass guys say: “CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help.” With the SassScrypt you can cross the limits set by the CSS, using features that are not remotely possible yet in CSS like variables, nesting, mixins, inheritance and other goodies that make styling fun again.



To help you paint an image, lets say I want the colour of my font to be black or white, depending on the brightness of the background its placed in. Sass makes that easier (and shorter!) by writing a mixin.

It has a particular syntax, which uses indentation to separate code blocks and newline characters to separate rules. It is very simple and easy to write. This language is completely compatible with all versions of CSS.

building effectiveness

One of the greatest things of using a CSS preprocessor is having the ability to split and organize all of them in different files and folders without impacting performance. Thanks to Sass’s @import directive you can combine all into one "master" file, have it processed and compiled into your main stylesheet in production.

You should break files into as many as necessary for the project, there is no negative side on that. Even creating folders and separating your sass files according to the type of element. 

This is how we separate our folders and files:

|-- base/                 # All default stylings
|   |-- _base.sass        # structure elements
|   |-- _typo.sass        # typography
|   |-- _colors.sass      # colors
|   ...
|-- components/           # Specific elements used across the site
|   |-- _navigation.sass  # imports for all mixins + global project variables
|   |-- _buttons.sass     # buttons
|   |-- _carousel.sass    # figures
|   |-- _grids.sass       # grids
|   |-- _dropdowns.sass   # typography
|   |-- _reset.sass       # reset
|   ...

|-- layout/               # Specific elements used across the site
|   |-- _header.sass      # imports for all mixins + global project variables
|   |-- _footer.sass      # buttons
|   |-- _sidebar.sass     # figures
|   |-- _forms.sass       # grids
|   |-- _dropdowns.sass   # typography
|   ...

|-- helpers/              # Sass logics
|   |-- _variables.sass   # Variables
|   |-- _functions.sass   # Functions
|   |-- _mixins.sass      # Mixins
|   ...

|-- pages/                # Pages that need particular styling in your site
|   |-- _index.sass       # Homepage
|   |-- _blog.sass        # Blog
|   |-- _contact.sass     # Contact-us 
|   ...

|-- vendor/               # CSS or Sass from other projects
|   |-- _colorpicker.sass
|   |-- _bootstrap.sass
|   ...
`-- main.sass            # Primary Sass file

Primary Stylesheet

All this files will be compiled into one clean sass file.

@import 'basic/_base'
@import 'basic/_type'
@import 'basic/_colors'

@import 'components/_buttons'
@import 'components/_carousel'
@import 'components/_grids'
@import 'components/_dropdowns'
@import 'components/_reset'

@import 'helpers/_variables'
@import 'helpers/_functions'
@import 'helpers/_mixins'

@import 'layout/_footer'
@import 'layout/_grid'
@import 'layout/_header'
@import 'layout/_sidenavigation'

@import 'pages/_blog'
@import 'pages/_contact'
@import 'pages/_index'
@import 'pages/_portfolio'

@import 'vendor/_colorpicker'
@import 'vendor/_bootstrap'

Using partials

All the sass files used in the /base folders will involve default styling throghout the website: structure elements, fonts, headings, etc. 

Not every Sass code will actually output CSS, for example things like mixin declarations, functions, and variables. 

The useful thing about a base.sass is, when writing this "helpers" you can import it and load up the Sass environment, so that it's easy to construct a stylesheet.

Particullarly with "pages", is up to the project and the stylings if you decide to import them in your main sass file. If they have very particular stylings, they can be compiled on their own (and will not be loaded on every page).

About Mercedes Scenna

The sassy frontend skilled/ She does not only coding but also conceptualizing and drawing/ Traveling and photography is her passion.