SCSS Mixin Library: Cross-Browser Utilities Reference

_mixins.scss is the core utility library for Setup Gulp. Every mixin handles vendor-prefixing and cross-browser quirks internally, so call-sites stay clean. The file depends on _functions.scss (loaded at the top via @use './functions') for color conversion and string helpers used by a handful of mixins.

Typography

`font`

@include font($family, $size, $weight, $style, $stretch, $color, $lheight, $lspacing);

All parameters are optional. Any argument passed as null is omitted from the output so you never get spurious property declarations. Covers every typographic axis in one call.

Parameter	Default	CSS property
`$family`	`null`	`font-family`
`$size`	`null`	`font-size`
`$weight`	`null`	`font-weight`
`$style`	`null`	`font-style`
`$stretch`	`null`	`font-stretch`
`$color`	`null`	`color`
`$lheight`	`null`	`line-height`
`$lspacing`	`null`	`letter-spacing`

.title {
  @include mixins.font(fonts.$roboto-black, 1rem, 400, var(--black));
}

`font-face`

@include font-face($name, $path, $weight: null, $style: null, $exts: eot woff2 woff ttf svg);

Generates a complete @font-face block that covers every major web font format. The $exts list controls which src entries are emitted.

@include font-face('Roboto Black', '../fonts/roboto-black', 900, normal);

`opacity`

@include opacity($opacity);

Sets opacity with an Internet Explorer 8 filter: alpha(opacity=…) fallback.

.overlay {
  @include opacity(0.75);
}

`heading`

@include heading($size);

Generates h1–h6 selectors with decreasing font sizes. Each heading level steps down by 0.2 from the previous, starting from $size.

@include mixins.heading(2em);
// → h1 { font-size: 2em }
// → h2 { font-size: 1.8em }
// → h3 { font-size: 1.6em }
// → h4 { font-size: 1.4em }
// → h5 { font-size: 1.2em }
// → h6 { font-size: 1em }

Flexbox

Every flexbox mixin emits the legacy -webkit- prefix alongside the unprefixed property so older WebKit browsers are covered without extra effort.

Mixin	Default	Notes
`@include flexbox`	—	`display: flex` with webkit prefix
`@include inline-flex`	—	`display: inline-flex` with webkit prefix
`@include flex-direction($value)`	`row`	Also aliased as `@include flex-dir($args...)`
`@include flex-wrap($value)`	`nowrap`
`@include flex-flow($values)`	`row nowrap`
`@include order($int)`	`0`
`@include flex-grow($int)`	`1`
`@include flex-shrink($int)`	`0`
`@include flex-basis($value)`	`auto`
`@include flex($fg, $fs, $fb)`	`1, 0, auto`	Shorthand for grow / shrink / basis
`@include justify-content($value)`	`flex-start`	Also aliased as `@include flex-just($args...)`
`@include align-items($value)`	`stretch`
`@include align-self($value)`	`auto`
`@include align-content($value)`	`stretch`

.wrapper {
  @include mixins.flexbox();
  @include mixins.flex-wrap(wrap);
  @include mixins.align-items(center);
  @include mixins.flex-just(space-between);
}

.sidebar {
  @include mixins.flex-direction(column);
  @include mixins.flex-grow(1);
}

Layout & Box Model

`box-sizing`

@include box-sizing($box-model);

Emits -webkit-box-sizing, -moz-box-sizing, and box-sizing. A silent placeholder %box-sizing is also available for @extend.

* {
  @include mixins.box-sizing(border-box);
}

`border-radius`

@include border-radius($value: 3px);

Adds -webkit-border-radius and -moz-border-radius prefixes. Also sets -webkit-background-clip: padding-box and background-clip: padding-box to prevent color bleed at the corners.

.card {
  @include mixins.border-radius(0.5rem);
}

`border`

@include border($direction: '', $width: 1px, $style: solid, $color: #000);

A directional border helper. Pass a $direction of left, top, right, or bottom to set only that side; pass an empty string '' to set all four sides at once.

.panel {
  @include mixins.border('', thin, solid, var(--gray-30));   // all sides
  @include mixins.border(bottom, 2px, solid, var(--blue));   // bottom only
}

`clearfix`

@include clearfix();

Applies the classic ::after clearfix. Also available as a silent placeholder %clearfix for @extend.

.row {
  @include clearfix();
}

`reset-last-child`

@include reset-last-child($prop: margin);

Sets the given CSS property to 0 on the :last-child of the element — useful for stripping trailing margin or padding from the final item in a list.

.nav-list li {
  @include reset-last-child(margin);
}

Visual Effects

`box-shadow`

@include box-shadow($top, $left, $blur, $spread, $color, $inset: false);

Emits -webkit-box-shadow and box-shadow. Pass $inset: true to produce an inset shadow.

.base {
  @include mixins.box-shadow(0, 10px, 10px, -15px, var(--gray-60));
}

.inset-card {
  @include mixins.box-shadow(0, 4px, 8px, 0, var(--black-20), true);
}

`background-opacity`

@include background-opacity($color, $opacity: 0.3);

Sets a background color with an rgba() fallback. The mixin keeps a solid-color fallback for browsers that do not support rgba().

.base {
  @include mixins.background-opacity(var(--white), 1);
}

.modal-backdrop {
  @include mixins.background-opacity(var(--black), 0.6);
}

`gradient`

@include gradient($start-color, $end-color, $orientation);

Generates a cross-browser gradient. $orientation accepts vertical, horizontal, or radial.

.hero {
  @include mixins.gradient(var(--blue), var(--purple), horizontal);
}

`background-image`

@include background-image($imgpath, $position: 0 0, $repeat: no-repeat);

A shorthand for setting background-image, background-position, and background-repeat in one call.

.banner {
  @include mixins.background-image('/assets/hero.jpg', center center);
}

`retina`

@include retina($image, $width, $height);

Wraps the high-DPI image swap in a min-device-pixel-ratio: 1.3 media query targeting Retina and HiDPI displays.

.logo {
  @include mixins.retina('/assets/logo@2x.png', 100px, 40px);
}

`backface-visibility`

@include backface-visibility($visibility: hidden);

Emits -webkit-backface-visibility, -moz-backface-visibility, -ms-backface-visibility, -o-backface-visibility, and backface-visibility, useful when applying 3D transforms to prevent flickering.

.flip-card {
  @include mixins.backface-visibility(hidden);
}

Transforms & Animations

`transform`

@include transform($transformation);

Emits -webkit-transform, -moz-transform, -ms-transform, -o-transform, and transform.

.icon {
  @include mixins.transform(rotate(45deg));
}

`transform-style`

@include transform-style($style);

Emits -webkit-transform-style, -moz-transform-style, -o-transform-style, -ms-transform-style, and transform-style. Typically used with preserve-3d.

.scene {
  @include mixins.transform-style(preserve-3d);
}

`transition`

@include transition($property: all, $duration: 0.5s, $ease: linear);

Emits -webkit-transition, -moz-transition, -o-transition, and transition.

.button {
  @include mixins.transition(background-color, 0.3s, ease-in-out);
}

`keyframes`

@include keyframes($name) {
  // keyframe content via @content
}

Wraps the animation block in @-webkit-keyframes, @-moz-keyframes, @-ms-keyframes, and @keyframes at-rules.

@include mixins.keyframes(slide-in) {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

User Interaction

`x-user-select`

@include x-user-select($value: none);

Emits the full vendor-prefixed stack: -webkit-user-select, -moz-user-select, -ms-user-select, and user-select.

.label {
  @include mixins.x-user-select(none);
}

`input-placeholder`

@include input-placeholder() {
  // styles via @content
}

Generates ::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, and ::placeholder selectors in one go.

.search-input {
  @include mixins.input-placeholder() {
    color: var(--silver);
    font-style: italic;
  }
}

Utility

`background`

@include background($color);

Dynamically generates a .bg-{hex} utility class for the given color, stripping the # from the hex value to form a valid class name. Uses to-string() from _functions.scss and str-slice() internally.

@include mixins.background(#3b82f6);
// Outputs: .bg-3b82f6 { background: #3b82f6; }

Getting Started

Gulp Tasks

SCSS System

Tooling & Quality

Configuration

SCSS Mixin Library: Cross-Browser Utilities Reference

Typography

`font`

`font-face`

`opacity`

`heading`

Flexbox

Layout & Box Model

`box-sizing`

`border-radius`

`border`

`clearfix`

`reset-last-child`

Visual Effects

`box-shadow`

`background-opacity`

`gradient`

`background-image`

`retina`

`backface-visibility`

Transforms & Animations

`transform`

`transform-style`

`transition`

`keyframes`

User Interaction

`x-user-select`

`input-placeholder`

Utility

`background`

Build docs developers (and LLMs) love

Getting Started

Gulp Tasks

SCSS System

Tooling & Quality

Configuration

Documentation Index

​Typography

​font

​font-face

​opacity

​heading

​Flexbox

​Layout & Box Model

​box-sizing

​border-radius

​border

​clearfix

​reset-last-child

​Visual Effects

​box-shadow

​background-opacity

​gradient

​background-image

​retina

​backface-visibility

​Transforms & Animations

​transform

​transform-style

​transition

​keyframes

​User Interaction

​x-user-select

​input-placeholder

​Utility

​background

Build docs developers (and LLMs) love

Typography

`font`

`font-face`

`opacity`

`heading`

Flexbox

Layout & Box Model

`box-sizing`

`border-radius`

`border`

`clearfix`

`reset-last-child`

Visual Effects

`box-shadow`

`background-opacity`

`gradient`

`background-image`

`retina`

`backface-visibility`

Transforms & Animations

`transform`

`transform-style`

`transition`

`keyframes`

User Interaction

`x-user-select`

`input-placeholder`

Utility

`background`