⬅

Sass Mixins

Breakpoint

These mixins makes it easy to use media queries in your code. Bluprnt has a standard set of breakpoint variables you can use.

Variable Name Value
smallest 0
small 360px
medium 600px
large 840px
larger 1280px
largest 1920px

breakpointBetween($breakpointMin, $breakpointMax)

Use the breakpointBetween mixin to apply styles between two standard Bluprnt breakpoints.

.mySelector {
  // Small screen first
  background: red;

  // Breakpoint
  @include breakpointBetween(medium, large) {
    background: blue;
  }
}

breakpointUp($breakpoint)

Use the breakpointUp mixin to apply styles from a starting breakpoint and up.

.mySelector {
  // Small screen first
  background: red;

  // Breakpoint
  @include breakpointUp(medium) {
    background: blue;
  }
}

breakpointDown($breakpoint)

Use the breakpointDown mixin to apply styles from a starting breakpoint and down.

.mySelector {
  // Small screen first
  background: red;

  // Breakpoint
  @include breakpointDown(small) {
    background: blue;
  }
}

Icon Font

bbIconFont()

The bbIconFont mixin simply injects the properties needed to use one of our icon font icons within CSS.

.mySelector {
  @include bbIconFont;

  content: "\e901";
}

Button Variant

The buttonVariant mixin generates all the rules needed to create a new button style.

@mixin buttonVariant(
  $bgColor,
  $borderColor,
  $color,
  $bgColorHover: $bgColor,
  $borderColorHover: $borderColor,
  $colorHover: $color
  ) { ... }

// Usage:

.button--secondary {
  @include buttonVariant(
    $color-secondary,
    $color-secondary,
    $color-white,
    $color-secondaryDark,
    $color-secondaryDark
  );
}
Parameter Default Value Description
$bgColor null Background color
$borderColor null Border color
$color null Text color
$bgColorHover $bgColor Background color on hover
$borderColorHover $borderColor Border color on hover
$colorHover $color Text color on hover.

EM & REM

the em() and rem() mixins allow you to convert a property with a pixel unit value with… You guessed it, an em or rem unit value.

@mixin em($property, $value, $important: false) {...}
@mixin rem($property, $value, $important: false) {...}

// Usage:

.mySelector {
  @include em(padding, $spacing-base);
  @include rem(font-size, $fontSize-large, important);
}
Parameter Default Value Description
$property null The CSS property
$value null The value
$important false Adds the !important flag.

Font Size

The fontSize() mixin allows you to set a rem value font size as well as a custom line height. By default it generates the line height based off the font size.

Note: You should always use this mixin when declaring font size. If we ever decide to support older IE versions, we can turn on a flag to enable fallback pixel values.

@mixin fontSize($fontSize, $lineHeight: "auto", $important: false) {...}

// Usage:

.mySelector {
  @include font-size($fontSize-large, $lineHeight-loose, important);
}

.mySelector {
  @include font-size(20px);
}
Parameter Default Value Description
$fontSize null Font size in pixels.
$lineHeight "auto" Line height in pixels.
$important false Adds the !important flag if set to 'important'.

CSS Triangle

Generate a little CSS triangle with the triangle() mixin. (Currently used for tooltips)

@mixin triangle($dir, $width, $height, $color) {...}

// Usage:

.mySelector {
  @include triangle(down, 10px, 6px, $color-grayLight);
}
Parameter Default Value Possible Value Description
$dir null up, down, left, right The direction the triangle points.
$width null Number in pixels. Width of the triangle.
$height null Number in pixels. Height of the triangle.
$color null Any hex color of color variable. Color of the triangle.

Vertical Align

Use the verticalAlign() mixin to vertically align an element, even if you don’t know it’s height, with transform: translateY.

Based on the technique used in this article: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

@mixin verticalAlign($position: relative) {...}

// Usage:

.mySelector {
  @include verticalAlign(); // Defaults to relative
}

// or

.mySelector {
  @include verticalAlign(absolute);
}
Parameter Default Value Possible Value Description
$position relative relative, absolute Set's the position property's value.

Function: EM & REM

the em() and rem() functions allow you to convert a property with a pixel unit value with… You guessed it, an em or rem unit value.

@function em($value) {...}
@function rem($value) {...}

// Usage:

.mySelector {
  padding: rem(20px)
  line-height: rem(30);
}

// or

.mySelector {
  padding: em(20px)
  line-height: em(30);
}
Parameter Default Value Possible Value Description
$value null Any number or variable with pixel values. The unit to convert into rem or em.