--- name: functions-mixins url: /functions-mixins title: Functions and Mixins ---

Functions & Mixins

Take advantage of some handy functions we built into Foundation or customize our mixins to make your own component styles. We've included visibility functions and color theming as well.


Functions

Is It Light?

This function takes a background color, and returns an appropriate foreground color based on if the background is light or dark.

.component { $bg: dodgerblue; background: $bg; // By default, the function returns black if the background is light, or white if the background is black color: isitlight($bg); // However, you can override this. The first parameter is the dark color to return, while the second parameter is the light color color: isitlight($bg, #333, #ccc); }

Smart Scale

This function takes a color, and makes it darker if the color is light, or lighter if the color is dark. We use this function to create appropriate offset colors for components.

.component { background: dodgerblue; // Adjust the intensity of the scaling by adding a percentage value after the color. 5% is the default border: 1px solid smartscale(dodgerblue, 10%); }

rem Calculation

Rems are very useful, but thinking in rems can be hard. Our rem calculation function will convert a pixel value to the correct rem value, based on the base font size of the document.

.component { font-size: rem-calc(20); // = 1.25rem }

Mixins

CSS Triangle

Generates a CSS triangle, for use as a dropdown arrow, modal tail, or anything you can think of.

.component { &::after { @include css-triangle( $triangle-size: 10px, // Size of the triangle $triangle-color: red, // Color of the triangle $triangle-direction: top // Orientation of the triangle; can be top, right, bottom, or left ); } }

Clearfix

If you have an element that only contains floated elements, you'll need to add a clearfix to give the container proper height.

.component { @include clearfix; .floaty-thing { float: left; } }