Sass Functions
Behind the scenes, Foundation is powered by a set of utility Sass functions that help us work with colors, units, selectors, and more.
Importing
All of Foundation's Sass utilities are in the folder scss/util, and broken up into multiple files by category. You can import every utility file at once using this line of code:
@import 'util/util';
Or, utilities can be imported individually.
// Color manipulation
@import 'util/color';
// Selector generation
@import 'util/selector';
// Unit manipulation and conversion
@import 'util/unit';
// Value checking and extraction
@import 'util/value';
Variables, functions, or mixins prefixed with -zf- are considered part of the internal API, which means they could change, break, or disappear without warning. We recommend sticking to only the public API, which is documented below.
Sass Reference
Mixins
We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.
add-foundation-colors
@include add-foundation-colors;Transfers the colors in the $foundation-palette variable into the legacy color variables, such as $primary-color and $secondary-color. Call this mixin below the Global section of your settings file to properly migrate your codebase.
flex
@include flex;Enables flexbox by adding display: flex to the element.
flex-align
@include flex-align($x, $y);Horizontally or vertically aligns the items within a flex container.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$x |
Keyword | null |
Horizontal alignment to use. Can be |
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-align-self
@include flex-align-self($y);Vertically align a single column within a flex row. Apply this mixin to a flex column.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$y |
Keyword | null |
Vertical alignment to use. Can be |
flex-order
@include flex-order($order);Changes the source order of a flex child. Children with lower numbers appear first in the layout.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$order |
Number | 0 |
Order number to apply. |
Functions
foreground
foreground($color, $yes, $no, $threshold)Checks the lightness of $color, and if it passes the $threshold of lightness, it returns the $yes color. Otherwise, it returns the $no color. Use this function to dynamically output a foreground color based on a given background color.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$color |
Color | None |
Color to check the lightness of. |
$yes |
Color | $black |
Color to return if |
$no |
Color | $white |
Color to return if |
$threshold |
Percentage | 60% |
Threshold of lightness to check against. |
smart-scale
smart-scale($color, $scale, $threshold)Scales a color to be lighter if it's light, or darker if it's dark. Use this function to tint a color appropriate to its lightness.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$color |
Color | None |
Color to scale. |
$scale |
Percentage | 5% |
Amount to scale up or down. |
$threshold |
Percentage | 40% |
Threshold of lightness to check against. |
text-inputs
text-inputs($types)Generates a selector with every text input type. You can also filter the list to only output a subset of those selectors.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$types |
List or Keyword | |
A list of text input types to use. Leave blank to use all of them. |
strip-unit
strip-unit($num)Removes the unit (e.g. px, em, rem) from a value, returning the number only.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$num |
Number | None |
Number to strip unit from. |
rem-calc
rem-calc($values, $base)Converts one or more pixel values into matching rem values.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$values |
Number or List | None |
One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. |
$base |
Number | null |
The base value to use when calculating the |
has-value
has-value($val)Determine if a value is not falsey, in CSS terms. Falsey values are null, none, 0 with any unit, or an empty list.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$val |
Mixed | None |
Value to check. |
get-side
get-side($val, $side)Determine a top/right/bottom/right value on a padding, margin, etc. property, no matter how many values were passed in. Use this function if you need to know the specific side of a value, but don't know if the value is using a shorthand format.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$val |
List or Number | None |
Value to analyze. Should be a shorthand sizing property, e.g. "1em 2em 1em" |
$side |
Keyword | None |
Side to return. Should be |
get-border-value
get-border-value($val, $elem)Given border $val, find a specific element of the border, which is $elem. The possible values for $elem are width, style, and color.
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$val |
List | None |
Border value to find a value in. |
$elem |
Keyword | None |
Border component to extract. |
map-deep-get
map-deep-get($map, $keys...)Finds a value in a nested map.
Learn more: Deep Get/Set in Maps
| Parameter | Type | Default Value | Description |
|---|---|---|---|
$map |
Map | None |
Map to pull a value from. |
$keys... |
String | None |
Keys to use when looking for a value. |
