Category: Code

Common but not recommended way to use a respond-to function

Having it like this the respond-to function can handle any media query and put the parent it’s nested in inside of it. .factory in this case.

Pairing 2 lists together with Zip function and loop through it setting the background to each color with a class name of author-name, Output in .css: .author-alex {background:red;} etc…

Scale_color function in sass scales the color relative from the starting color to the max number instead of normal linear functions. The code above will output : .content { color:#efefef;} instead of #ffffff like it would with a normal lighten() function. Other arguments it takes in: $red, $green, $blue $saturation $alpha.

By looping through the list $styles that is populated with lists, we can set each property by separating the property and value pair with the nth-function.

Because there isn’t a $darkness keyword we use a negative value on $lightness in order to darken a color. The result will be: #242424

Instead of writing an if else statement Sass can handle single line ifs as well. If the crew is less then 4 people the color will go green otherwise red. Note that lists in Sass/Scss starts on 1 and not 0!

By including the mixin “background” with Compass, Compass will automatically add all prefixes needed for mozilla,webkit etc without you having to worry about it.

Compass got built in function for all the scale_color functions. You can simply use them by writing scale-KEYWORD(color, value);

This mixin creates a triangle using the border properties in css. By using the opposite-position function in Compass we can create a triangle with only 1 argument and let the mixin calculate the opposite side.