SASS

Question 1

Create a loop where variable i goes from 1 to 10.

Answer 1

@for $i from 1 through 10 {

.box-#{$i} { // some styles }

Question 2

Interpolate the variable $i so you can make classes called .box-1, .box-2, etc, based on a loop.

Answer 2

.box-#{$i} { // some styles }

Question 3

Assuming you have variable $i = 1, calculate percentage of 1/12 in order to say width: 8.33333%;

Answer 3

width: percentage($i / 12); // no need for % sign

Question 4

What’s a sass map?

Answer 4

A set of key/value pairs, like a js object. Syntax is:
$sizes: ( small: 10%, medium: 25%, large: 100% )
// use parens and commas.

Question 5

Loop over a sass map

Answer 5

@each $key, $value in $map { … }

Question 6

Create a reusable media query mixin

Answer 6

@mixin smallScreen ($w: 800px) {
@media screen and (max-width: $w) {
@content
}

Question 7

Instead of writing @media for a media query, use a mixin called ‘smallScreen’ to style an h1 element.

Answer 7

@include smallScreen {

h1 { // styles

Question 8

Create a function taking a number and returning it as an em.

Answer 8

@function toEm($num) {

@return #{$num}em; // or $num * 1em;

Question 9

Use a sass function called getWidth() in a style value for width.

Answer 9

width: getWidth(n);