How can you tell if a programmer knows Sass in 5 questions?

Share Button

This article was originally posted on snap.hr

Recently I have been asked my Robert Tucker from snap.hr to write an article about SASS. Basically its a set of 5 questions(with answers) that sort the Sass noobs from the pros.

These 5 fiendish questions will test anyone’s Sass skills. Ready? Let’s go!

1) Why is it bad idea to use a mixin like this:

This is a pretty basic question to start with. Using this mixin means you are actually copying and pasting the entire block where ever you @include this which is a bad idea. A good answer should explain that you should use @extend for this purpose which will make the output css smaller.

This way @extend just makes a chain of css classes which share same properties instead of creating a whole copy of it. Use @include only when you are making some calculation or passing variables. If you are just repeating the rules then use @extend. The above code will generate this:

You can see that we have a .message css class in the selector list. If you do not need the .message class itself, then use a placeholder instead %message. It will not generate an extra .message selector and also will not output anything if it hasn’t been extended anywhere. Have a look at this and this.

The important thing here is that you should understand the importance of output CSS in each of these cases. Sometime the size of generated CSS is not important. There is a very good article about extend and mixin by Harry Roberts you should read.

2) What will be the compiled CSS output of the following:

Too easy? Ok what about this… what will be the body of the following block to generate .btn a.ROOT {padding: 10px;} where .ROOT is .btn

The answer is that & always refers to the root or parent selector so the first two will generate the following:

Note that a { & .btn } is same as a { .btn }

To answer the second question, this is called qualifying a selector means you are prepending an element to a class within the ruleset. There is a way which is not very elegant but works.

You can also write a mixin for this case.

3) How you can refer to the SASS line number from web inspector?

The simple answer should be to either use Chrome’s source map (set –sourcemap flag in command line) or take advantage of the :debug-info option in SASS using SASS Sleuth (for webkit inspector) or use firefox developer tools Firefox. These tools help you mapping the CSS rule to the its location in SASS file.

4) What will be the first worrying thing you notice in the following code:

Simple thing you should notice is deep nesting (4 levels)
Bonus points for explaining why deep nesting is not good and what how can it affect the performance.

5) We use data-uri in LESS to convert images into base64 format i.e. inline images in CSS file to reduce http requests. How you do this in SASS?

There is no built-in way (at least until this date) in SASS. You can use Gulp/Grunt plugins OR use Compass. If they start talking about their favourite gulp plugins and also give you some reaons not to convert images to base64, then chances are you’ve found yourself a Sass pro.

If you have a better question to ask then please leave it in the comments below!

Share Button
Copyright © 2017 — musings of Aamir Afridi