Category: Compass

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.

This codeblock creates a function called button-text that make use of the built-in function contrast-color in Compass. The function takes in 4 arguments in this order: Color, dark color, light color, threshold %. So depending on what color gets written and the threshold, it will either be the dark or the light one that returns..

With compass you don’t have to specify the exact relative path, same thing works with image-url.

To make sure that the text will be a readable the color get set to a contrast of the background using the contrast-color function in Compass.

By importing compass/layout in order to get more mixins and functions, one of them are Stretch which stretches the element to instead of writing a absolute position and top,right,bottom,left. without any arguments the function default values are 0.

Line height equal to arrow.png’s height and right padding equal to arrow.png’s width , plus 10px. We are using image-height() and image-width() to automate the values.

The compass-function inline-image will convert the image to a base64 object.

The .css output of this will be: