Menu

1.16Functions & Mixins

Concise leverages the power of SASS to include mixins and functions that help with common tasks.

Mixins

clearfix()

This mixin takes no parameters, and is only used to generate CSS that will clear both left and right floats.

container()

This mixin takes no parameters, and is only used to generate a container for content that is the width of the $container-width variable.

row()

This mixin generates CSS for a row that is used to contain columns.

ParameterTypeDescription
$clear-gutterBooleanSet false to contain columns without gutter (Default is true)

column()

Use this mixin to generate CSS for a column.

ParameterTypeDescription
$sizeFractionThe size of the column, should be a number between 0-1. (Example: 1/2)
$add-gutterBooleanSet this to false if you want to create a column without gutter (Default is true)

columnOffset()

Use this mixin to generate CSS for a column.

ParameterTypeDescription
$offsetFractionThe size of the offset, should be a number between 0-1. (Example: 1/2)

Functions

unitSize()

Use this function to set sizes with proportions. This can help maintain vertical rhythm, and keep your design consistent.

ParameterTypeDescription
$multiplierNumberAmount to multiply the base unit by (8px by default)
$offsetNumberA value in pixels which will be added to the result. This can be positive for addition or negative for subtraction (default is 0)

pxToEm()

This function converts px units to em units based off of the base font-size. This is used throughout the framework for calculating font-sizes.

ParameterTypeDescription
$pxNumberThe value in pixels to convert
$baseNumberThe base font-size used to calculate em units (Default is $font-base-size)

getColor()

Using this function, you can easily retrieve colors from the $colors map and use them throughout your design.

ParameterTypeDescription
$colorStringThe name of the color to retrieve
$valueColorThe shade of the color to retrieve