Recommendations for a Faster Workflow with Sass

I’ll make no secret of it: I love Sass. In this article I’m going to share my recommendations for working with Sass on a daily basis and on real projects.

Quick Tips for Configuring Sublime Text

Hayaku (Plugin)

Here’s an awesome plugin which will save you a lot of time. Open Package Control in Sublime Text, search for Hayaku and do a quick install. Now you can write your CSS faster and with shortcuts. Here are some examples:

// Write this and press tab
mt10
// Result
margin-top: 10px;
// Or this
df
// Result
display: flex;

Ignore Files and Folders (for Better Search Results)

Particularly for your Sass workflow there is one folder which we should ignore when searching in Sublime Text. The folder in question is .sass-cache, because this is only necessary for the compile process. Additionally, you must never edit anything in this folder, so make your life easier and hide it!

Press CMD-, to get the userconfig of your editor and insert the following lines:

"folder_exclude_patterns": [
".sass-cache"
]

Setup a Basic Folder Structure

Having a solid project structure is super important, especially if you work in a team.

I use three different sections (an approach from SMACSS by Jonathan Snook): _base, _layouts and _modules. A global config is ideal for placing in the _base folder. For each layout type you create a unique file and place it in the folder _layouts. Think, for example, of a basic layout, the grid or maybe a file for the print layout.

It's possible to split a website into different kinds of modules like tabs, buttons, accordions etc. No module should be “aware” of the layout around it. These then belong in the _modules folder.

Functions

Unless you use Sass 3.3 or Node-Sass, you will probably need the following function for simulating Sass Maps. Sass maps allow you to define sets of keys with associated values. In this case you can use the function, insert the key and then you will get its matching value. Here is a quick example:

Basic Necessary Mixins

Here are some mixins which you will probably need in every project. Let's start with some simpler stuff like building a column with sass

Column-Creation

A grid is absolutely indispensable in your project. With this helper (a mixin I’ve named col) it's easier to create the width of a column. It expects two values: the number of the column ($col) and the maximum columns ($max-cols) in your grid, the default being 12.

Font-Size

The time has long passed that we only need pixel values. Where possible these days I try to use em or rem. These are both relative units of measurement, the difference between them being that em is based on the value of its parent container and rem is based on the font-size of the root (the html element).

Font-Face

Manually embedding fonts via CSS3 isn't easy, because there are so many formats for different kinds of browsers. A mixin is the perfect solution for this. This mixin is called font-faceand it expects two values. The first one is the name for the font-family and the second is the path to the different file-formats of the font. Read more about these various formats on Mozilla Developer Network.

Icon-Creation

Jayden Seric did a great job with his mixin for including icons. Here we have a mixin called iconwith two parameters: $position for the pseudo-elements, then the boolean $icon which is set to true or false. Create a variable called $icons, define the name of the icon (key) and the valuefor it:

Respond-to

I am so thankful for this mixin by Snugug: it's a great way to configure your global breakpoints and the best part is that you give each breakpoint its own name. Differentiating things with names is so much better than with pixels. This also gives you a good overview of all widths used and a central place to change the behavior.

Setup Basic Variables

Create Color-Sheme

Handling variables in a scalable front-end is often a philosophical question. In my case I have a workflow for it that suits me well. First we create a color palette with all available colors and give them normal identifying names.

Point out the Corporate Colors

After we have a good palette with all available colors we should point out the corporate or main colors of the project. With this step it's possible to create a brand new theme for the project without wasting time adapting the colors in your whole files.

Layouts

Flexible Grid

There are many many grid systems in the world, but the grid by PureCSS is, in my eyes, one of the best. I took up the idea behind it, did some magic with Sass that let’s me create column classes quickly and build a grid for small, medium and large viewports.

Why have grids for different viewports?

It’s super easy to change the responsive behavior of an element. You define the behavior once for the module, but if you have other behavior at some point, than you create a modifier like .m-text-with-asset--large

Setup Icons

Create an Icon Font

Do you prefer a online font-generator or do you use a command-line interface for generating fonts? I prefer an online solution, the tool of my choice being fontastic.me. There is a great overview of all your fonts, you can choose how the class- or character-mapping should be.

Setup Class for Each Icon

Now let's start to create classes for your icons. I won't show you the basic styles of each icon. You can handle that by yourself, but this can help you with the basic icon-setup.

Don’t Build Pages. Build Modules.

Do you know what I mean? When I first began as a CSS developer I built everything based on the designer’s page, but what if you need one module on another site? Because of this it's important to build closed modules without the layout around it.

Give Your Module a Good Structure

Create a file for your module and put it in the folder _modules. At the top of the file you have a configuration area, where you define colors or other aspects that will affect the theme.

Under the configuration you will define the module with all styles. Use comments well, in order to simplify the module.

Conclusion

Feel free to fork the repository which holds all the code seen in this article. I hope that it helps you to build a better scalable front-end in real-world projects Please share your thoughts and ideas with me in the comments.