Mixins

Backbreeze is not a mixin library and therefor only provides two mixins intended for public use.

bb-utility-class

The bb-utility-class mixin is used under the hood to create all of Backbrezze' utility classes. By default it takes a property configuration map as parameter (see property-driven variables) but it can also take a @content block to generate classes with multiple properties. This can be practical to generate custom utility classes for your project.

Usage with a property configuration map:

Mandatory keys:

• 'name': <String> Defines the generated class name
• 'prop': <String> CSS property used
• 'values': <Map> Property values where each map key maps to the value name used in the class name

Optional keys:

• 'bps': <Map> If set this will generate a responsive utility classes. Typically this will be set to $bb-bps
• 'pseudo': <Map> If set this will generate pseudo selector utility classes. Typically this will be set to $bb-pseudo
• 'important': <Boolean> If set the properties will be made !important

Example

// _animation-utility.scss
@include bb-utility-class(
  (
    'name': 'anim',
    'prop': 'animation-name',
    'values': (
      'spin': spin,
      'pulse': pulse,
      'none': none,
    ),
    'bps': $bb-bps // <- Use the general breakpoints,,,
  )
);

Usage with a content block:

Mandatory keys:

• 'name': <String> Defines the generated class name

Optional keys:

• 'bps': <Map> If set this will generate a responsive utility classes. Typically this will be set to $bb-bps
• 'pseudo': <Map> If set this will generate pseudo selector utility classes. Typically this will be set to $bb-pseudo

Example

// _embed.scss
.embed {
  position: relative;
  &::before {
    content: '';
    display: block;
  }
}
@include bb-utility-class(
  (
    'name': 'embed-16\\:9',
    'bps': $bb-bps,
  )
) {
  &::before {
    padding-bottom: 9 / 16 * 100%;
  }
}
@include bb-utility-class(
  (
    'name': 'embed-4\\:3',
    'bps': $bb-bps,
  )
) {
  &::before {
    padding-bottom: 3 / 4 * 100%;
  }
}

Usage:

<div class="embed embed-4:3 embed-16:9@md">
  <iframe src="//example.com/video" frameborder="0"></iframe>
  <!-- This embed will be 4:3 ration on mobile and 16:9 on larger screens -->
</div>

bb-mq

The $bb-mq mixin is a convenience mixin that allows you to reference breakpoints defined in the global $bb-mqs variable by name and thus avoid having to hardcode values or do string interpolation.

As first parameter it accepts the following:

• <String> Will render a min-width media query when matching a key in the global $bb-mqs map matching the key's value
• <Strings> Will render @media #{<String>}, useful for max-width or other complex media queries
• <Number> Will render a min-width media query
• <Null | Boolean> Will just render the @content block without a media query

The second parameter allows to define the media type and is only used when a string matching [$bb-mqs] map key or a number is passed.

Example

// _config.scss
$bb-mqs: (
  'sm': 400px,
  'lg': 900px,
);
// _my-custom-module.scss
.my-module {
  color: red;
  @include bb-mq(false) {
    font-size: 30px;
  }
  @include bb-mq('sm') {
    color: purple;
  }
  @include bb-mq(600px) {
    color: yellow;
  }
  @include bb-mq('lg', 'screen') {
    color: blue;
  }
  @include bb-mq('screen and (max-width: #{map-get($bb-mqs, ' sm ') - 1px})') {
    font-size: 22px;
  }
  @include bb-mq('print') {
    color: black;
  }
}

Result:

.my-module {
  color: red;
  font-size: 30px;
}
@media all and (min-width: 400px) {
  .my-module {
    color: purple;
  }
}
@media all and (min-width: 600px) {
  .my-module {
    color: yellow;
  }
}
@media screen and (min-width: 900px) {
  .my-module {
    color: green;
  }
}
@media screen and (max-width: 399px) {
  .my-module {
    font-size: 22px;
  }
}
@media print {
  .my-module {
    color: black;
  }
}