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.
Parameter | Type | Description |
---|---|---|
$clear-gutter | Boolean | Set false to contain columns without gutter (Default is true ) |
column()
Use this mixin to generate CSS for a column.
Parameter | Type | Description |
---|---|---|
$size | Fraction | The size of the column, should be a number between 0-1. (Example: 1/2 ) |
$add-gutter | Boolean | Set 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.
Parameter | Type | Description |
---|---|---|
$offset | Fraction | The 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.
Parameter | Type | Description |
---|---|---|
$multiplier | Number | Amount to multiply the base unit by (8px by default) |
$offset | Number | A 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.
Parameter | Type | Description |
---|---|---|
$px | Number | The value in pixels to convert |
$base | Number | The 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.
Parameter | Type | Description |
---|---|---|
$color | String | The name of the color to retrieve |
$value | Color | The shade of the color to retrieve |