Mixins & functions

Notice: most of the mixins and functions use values defined in the settings file by default. The exact outputed value may differ from the examples below.

Mixins

foreach-breakpoint($breakpoints: $breakpoints-default, $prefix: null)

Loop through the given breakpoints list. Each iteration get the breakpoint name as $breakpoint-name. Both parameters are optional.

@include foreach-breakpoint($breakpoints-default, 'screen and') {
  .#{$breakpoint-name}-text-center {
    text-align: center;
  }
}

Will generate:

@media screen and (min-width: 40.0625em) {
	.sm-text-center {
		text-align: center;
	}
}

@media screen and (min-width: 48.0625em) {
	.md-text-center {
		text-align: center;
	}
}

@media screen and (min-width: 64.0625em) {
	.lg-text-center {
		text-align: center;
	}
}

media($mq, $breakpoints: $breakpoints-default)

Shortcut to scope content into a media query by using the breakpoint name as a parameter.

@include media('md') {
	.foo {
		bar: baz;
	}
}

Will generate:

@media (min-width: 48.0625em) {
	.foo {
		bar: baz;
	}
}

Functions

rem($value, $base: $base-font-size)

Calculate the corresponding rem value proportionnaly to the $base-font-size or the value of your choice when specified as the second parameter.

font-size: rem(24px);
//-> font-size: 1.5rem;

font-size: rem(30px, 15px);
//-> font-size: 2rem;

ratio($value, $ratio: $ratio)

Divide the given value by the $ratio rounded down. Useful to create “visually equal” spacings as mathematically equal spacings never "visually" look equal around text.

padding: ratio(24px) 24px;
//-> padding: 14px 24px;

parseInt($value)

Return the value without unit.

parseInt(10px)
//-> 10