1425999563 1413984958 1397552512 speed 2

How Sass 3.3 Will Solve Your RWD Problems

At Netguru we use Sass a lot. You can read a previous post about how Sass features help us in our day-to-day work. In this blog post I'll write about my favorite new features in Sass 3.3, and how it helps us with creating responsive web pages.

Sass 3.3

Last month Sass 3.3 officially went live. It has plenty of new features and improvements to love, but three of them stand out the most:

Multiple assignment in @each loops

When you use Sass, you’re probably using @each loops quite a bit. In 3.3, you can iterate through a list of lists.

Maps

You can achieve similar result by using maps:

But maps are much more than that. I've added a living example of using maps in the RWD section. Be sure to check out map-merge and map-remove features, too.

Parent selector suffixes

Parent selector suffixes are extra helpful when you're using BEM syntax. Now instead of writing:

You can write something like this:

In both examples, the output will look exactly the same:

Responsive Web Design and Sass

These features help writing day-to-day CSS but they’re also helpful while writing responsive CSS. When I am working on RWD, I stick to a mobile-first concept. I've tested a few approaches:

Different files

At first, I used to have separate stylesheets for different screen breakpoints:

The main disadvantage of this solution is that you have to rewrite some selectors to override default values. Also, it wasn’t comfortable for me to have everything in different files.

Same file

The second approach was to append responsive overrides to the end of the file.

This didn't feel good with me at all. I still had to rewrite selectors + a lot of @media declarations.

Inline mixin

Another step was to create a mixin similar to respond-to mixin by Mike Fowler. Since Sass 3.3 provides maps, it can be done in more DRY way:

Experiment

Recently, I've noticed that in about 85% of cases, I group devices in two groups: phones and tablets + desktops. I wanted to reduce code to the minimum, so I created a set of mixins:

Best of all, it's easily extendable to multiple breakpoints! Keep in mind this is purely experimental right now, I haven't had a chance to properly test it yet!

And what solutions do you use to deal with CSS for RWD?

On 15.04.2014 in CSS and dev