Work in progress
Version 1.5.7
Last updated 7.15.2024

Sass Mixins

Source:main.scss, line 4

Absolute

Absolulety positions an element.

Definition

@mixin absolute($top:null, $right:null, $bottom:null, $left:null) {
  position: absolute;
  @if $top    { top: $top; }
  @if $right  { right: $right; }
  @if $bottom { bottom: $bottom; }
  @if $left   { left: $left; }
}

Parameters:

Name	Description	Default Value
`$top`	Top value	null
`$right`	Right value	null
`$bottom`	Bottom value	null
`$left`	Left value	null

Example Usage

.sample {
  @include absolute(10px, 10px, 5px, 15px);
}

Compiled Output

.sample {
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 5px;
  left: 15px;
}

Source:global-scss/helpers/mixins/_absolute.scss, line 3

Breakpoint Mixins

Mixins for use with breakpoint slicer.
See src/global-scss/_settings.scss for breakpoint definitions.

Source:global-scss/helpers/mixins/_breakpoint-slicer.scss, line 3

From

Wraps the content block provided with a media query with min-width equal to the right edge of a slice.

Definition

 @mixin from($slice) {
   @include between($slice, total-slices()){
     @content;
   }
 }

Parameters:

Name	Description	Default Value
`$slice`	A number of a slice. Should be a positive integer.	null

Example Usage

 .sample {
   @include from(4) {
     display: none;
   }
 }

Compiled Output

 @media (min-width: 400px) {
   .sample {
     display: none;
   }
 }

Source:global-scss/helpers/mixins/_breakpoint-slicer.scss, line 49

At

Wraps the content block provided with a media query with min-width and max-width equal to the edges of a slice.

Definition

 @mixin at($slice) {
   @include between($slice, $slice){
     @content;
   }
 }

Parameters:

Name	Description	Default Value
`$slice`	A number of a slice. Should be a positive integer.	null

Example Usage

 .sample {
   @include at(4) {
     display: none;
   }
 }

Compiled Output

 @media (min-width: 400px) and (max-width: 499px) {
   .sample {
     display: none;
   }
 }

Source:global-scss/helpers/mixins/_breakpoint-slicer.scss, line 13

Between

Wraps the content block provided with a media query with min-width equal to the left edge of the left slice and max-width equal to the right edge of the right slice.

Definition

 @mixin between($slice-left, $slice-right) {
   $slice-left: get-slice-id($slice-left);
   $slice-right: get-slice-id($slice-right);
   @if ($slice-left == 1) and ($slice-right == total-slices()) {
     @content;
   }
   @else {
     $context: left-bp-of-slice($slice-left);
     @if $slice-right < total-slices() {
       $right: right-bp-of-slice($slice-right);
       $context: append($context, $right);
     }
     @include breakpoint($context) {
       @content;
     }
   }
 }

Parameters:

Name	Description	Default Value
`$slice-left`	A number of the left slice. Should be a positive integer.	null
`$slice-right`	A number of the right slice. Should be a positive integer.	null

Example Usage

 .sample {
   @include between(4,5) {
     display: none;
   }
 }

Compiled Output

 @media (min-width: 400px) and (max-width: 599px) {
   .sample {
     display: none;
   }
 }

Source:global-scss/helpers/mixins/_breakpoint-slicer.scss, line 121

To

Wraps the content block provided with a media query with max-width equal to the right edge of a slice.

Definition

 @mixin to($slice) {
   @include between(1, $slice){
     @content;
   }
 }

Parameters:

Name	Description	Default Value
`$slice`	A number of a slice. Should be a positive integer.	null

Example Usage

 .sample {
   @include to(4) {
     display: none;
   }
 }

Compiled Output

 @media (max-width: 399px) {
   .sample {
     display: none;
   }
 }

Source:global-scss/helpers/mixins/_breakpoint-slicer.scss, line 85

Clearfix

Clears floated content within a container.

Definition

@mixin clearfix-micro {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

Example Usage

.example {
  @include clearfix-micro;
}

Compiled Output

.example {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

Source:global-scss/helpers/mixins/_clearfix.scss, line 1

Component Margin

Applies a consistent margin-bottom to elements.

Definition

@mixin component-margin {
  margin-bottom: $component-margin;
}

Example Usage

.sample {
  @include component-margin;
}

Compiled Output

.sample {
  margin-bottom: 80px;
}

Source:global-scss/helpers/mixins/_component-margin.scss, line 1

Content Constraint

Applies a max-width to constrain content size.

Definition

@mixin content-constraint($width: 1400px) {
  max-width: $width;
  margin-left: auto;
  margin-right: auto;
}

Parameters:

Name	Description	Default Value
`$width`	Max-width of container	1400px

Example Usage

.sample {
  @include content-constraint;
}

Compiled Output

.sample {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

Source:global-scss/helpers/mixins/_content-constraint.scss, line 1

Hover

Add styles for :hover, :focus, :active and .-focused.

Definition

@mixin hover {
  &:active,
  &:focus,
  &:hover,
  &.-focused {
    @content;
  }
}

Example Usage

.sample {
  @include hover {
    color: red;
  }
}

Compiled Output

.sample:active,
.sample:focus,
.sample:hover,
.sample.-focused {
  color: red;
}

Source:global-scss/helpers/mixins/_hover.scss, line 1

This is a mixin to mimic the behavior of native css clamp() while supporting Safari 12.x and 13.0. Clamps a value between an upper and lower bound while selecting a middle value within a range of values between a defined minimum and maximum. See https://developer.mozilla.org/en-US/docs/Web/CSS/clamp() for more info.

Definition

@mixin font-clamp($min, $val, $max) {
  font-size: max(#{$min}, min(#{$val}, #{$max}));
  @media not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
      min-height: .0001vw;
    }
  }
}

Parameters:

Name	Description	Default Value
`$min`	Lower bound	null
`$val`	Preferred value. Should be either `vw` or `%`	null
`$max`	Upper bound	null

Example Usage

.h1 {
  @include font-clamp(rem(26px), 7vw, rem(48px));
}

Compiled Output

.h1 {
  font-size: max(1.625rem, min(7vw, 3rem));
  @media not all and (min-resolution: .001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
      min-height: .0001vw;
    }
  }
}

Source:global-scss/helpers/mixins/_font-clamp.scss, line 1

Font Weight

Compiles a string font-weight to it's associated integer font weight.

Definition

@mixin font-weight($weight) {
  $weights: (
    thin: 100,
    extra-light: 200,
    ultra-light: 200,
    light: 300,
    normal: 400,
    book: 400,
    regular: 400,
    roman: 400,
    medium: 500,
    semi-bold: 600,
    demibold: 600,
    demi-bold: 600,
    bold: 700,
    extra-bold: 800,
    ultra-bold: 900,
    heavy: 900,
    black: 900,
    ultra: 900,
    ultra-black: 900,
    extra-ultra: 900
  );
  $output: $weight;
  @if map-has-key($weights, $weight) {
    $output: map-get($weights, $weight);
  }
  font-weight: $output;
}

Parameters:

Name	Description	Default Value
`$weight`	Desired font weight as a string	null

Example Usage

.sample {
  @include font-weight(medium);
}

Compiled Output

.sample {
  font-weight: 500;
}

Source:global-scss/helpers/mixins/_font-weight.scss, line 1

Full Bleed

Uses negative left and right margin to negate padding on the <main> element.

Definition

@mixin full-bleed {
  margin-right: -20px;
  margin-left: -20px;
  @include from(7) {
    margin-right: -40px;
    margin-left: -40px;
  }
}

Example Usage

.sample {
  @include full-bleed;
}

Compiled Output

.sample {
  margin-right: -20px;
  margin-left: -20px;
}
@media (min-width: 768px) {
  .sample {
    margin-right: -40px;
    margin-left: -40px;
  }
}

Source:global-scss/helpers/mixins/_full-bleed.scss, line 1

Grid Placement

Specifies grid placement for the grid defined in src/global-scss/_layout.scss.

Definition

$grid-type: (
  constrained: main,
  full-bleed:  full,
  left-bleed:  full / main,
  right-bleed: main / full
);
@mixin grid-placement($type: constrained, $max-width: null) {
  grid-column: map-get($grid-type, $type);
  @if $max-width {
    width: 100%;
    max-width: $max-width;
    margin-left: auto;
    margin-right: auto;
  }
}

Parameters:

Name	Description	Default Value
`$type`	Grid type (possible values: contrained, full-bleed, left-bleed, right-bleed)	contrained
`$max-width`	Inner max-width to be used if the desired max-width is LESS THAN the $inner-max-width declaredin sec/global-scss/_settings.scss	null

Example Usage

.component {
  @include grid-placement;
}

Compiled Output

.component {
  grid-column: main;
}

Source:custom/helpers/mixins/_grid-placement.scss, line 1

Grid Placement

Specifies grid placement for the grid defined in src/global-scss/_layout.scss.

Definition

$grid-type: (
  constrained: main,
  full-bleed:  full,
  left-bleed:  full / main,
  right-bleed: main / full
);
@mixin grid-placement($type: constrained, $max-width: null) {
  grid-column: map-get($grid-type, $type);
  @if $max-width {
    width: 100%;
    max-width: $max-width;
    margin-left: auto;
    margin-right: auto;
  }
}

Parameters:

Name	Description	Default Value
`$type`	Grid type (possible values: contrained, full-bleed, left-bleed, right-bleed)	contrained
`$max-width`	Inner max-width to be used if the desired max-width is LESS THAN the $inner-max-width declaredin sec/global-scss/_settings.scss	null

Example Usage

.component {
  @include grid-placement;
}

Compiled Output

.component {
  grid-column: main;
}

Source:global-scss/helpers/mixins/_grid-placement.scss, line 1

Icon

Mixin to include Icomoon icons.

Definition

@mixin icon($icon: null, $position: before, $styles: true) {
  &::#{$position} {
    @if $icon {
      content: "#{map-get($icons, $icon)}";
    }
    @if $styles {
      font-family: 'icomoon' !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    // Include any extra rules supplied for the pseudo-element
    @content;
  }
}

Parameters:

Name	Description	Default Value
`$icon`	Name of the icon from the icons Sass map	null
`$position`	Position of the icon, either before or after	before
`$styles`	Boolean to output required Icomoon styling	true

Example Usage

.facebook-link {
  @include icon(facebook) {
    color: sm-color(facebook);
    &:hover,
    &:focus {
      color: #333;
    }
  };
}
.social-links {
  a {
    @include icon;
    &.facebook {
      @include icon(facebook, before, false);
    }
    &.twitter {
      @include icon(twitter, before, false);
    }
  }
}

Compiled Output

.facebook-link::before {
  content: "";
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #3b5998;
}
.facebook-link::before:hover, .facebook-link::before:focus {
  color: #333;
}
.social-links a::before {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social-links a.facebook::before {
  content: "";
}
.social-links a.twitter::before {
  content: "";
}

Source:global-scss/helpers/mixins/_icon.scss, line 1

Kill bullets

Removes bullets from lists.

Definition

@mixin kill-bullets($margin: 0, $padding: 0) {
  margin: $margin;
  padding: $padding;
  list-style: none;
}

Parameters:

Name	Description	Default Value
`$margin`	Margin for list
`$padding`	Padding for list

Example Usage

ul {
  @include kill-bullets;
}
ol {
  @include kill-bullets(0 0 20px, 0 0 0 15px);
}

Compiled Output

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
ol {
  list-style: none;
  padding: 0 0 0 15px;
  margin: 0 0 20px;
}

Source:global-scss/helpers/mixins/_kill-bullets.scss, line 1

Linear Gradient

Creates a linear gradient background with fallbacks.

Definition

@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: -45deg;
  }
  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

Parameters:

Name	Description	Default Value
`$direction`	Direction of gradient	null
`$color-stops`	Colors in gradient	null

Example Usage

.sample {
  @include linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.sample {
  background: #9fd64d;
  background: -webkit-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
  background: linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:custom/helpers/mixins/_linear-gradient.scss, line 1

Linear Gradient

Creates a linear gradient background with fallbacks.

Definition

@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: $direction, $color-stops;
    $direction: -45deg;
  }
  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

Parameters:

Name	Description	Default Value
`$direction`	Direction of gradient	null
`$color-stops`	Colors in gradient	null

Example Usage

.sample {
  @include linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Compiled Output

.sample {
  background: #9fd64d;
  background: -webkit-linear-gradient(135deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
  background: linear-gradient(-45deg, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
}

Source:global-scss/helpers/mixins/_linear-gradient.scss, line 1

Move

Adds relative position and sets direction of movement.

Definition

@mixin move($direction, $distance) {
  position: relative;
  @if ($direction == 'up')    { top: -$distance; }
  @if ($direction == 'right') { right: $distance; }
  @if ($direction == 'down')  { top: $distance; }
  @if ($direction == 'left')  { left: $distance; }
}

Parameters:

Name	Description	Default Value
`$direction`	Direction of movement	null
`$distance`	Distance of movement	null

Example Usage

.sample {
  @include move('up', 1.5rem);
}

Compiled Output

.sample {
  position: relative;
  top: -1.5rem;
}

Source:global-scss/helpers/mixins/_move.scss, line 1

Photo Credit

Adds Photo Credit to Image Container.

Definition

@mixin photo-credit($top: null, $right: 0, $bottom: 0, $left: null) {
  position: absolute;
  z-index: 0;
  @if $top {
    top: $top;
    bottom: auto;
  } @else {
    top: auto;
    bottom: $bottom;
  }
  @if $left  {
    right: auto;
    left: $left;
  } @else {
    right: $right;
    left: auto;
  }
  padding: 5px 10px;
  background-color: rgba(primary-color(black), .7);
  @include rem(font-size, 15px);
  color: primary-color(gray, tint3);
}

Parameters:

Name	Description	Default Value
`$top`	Top value	null
`$right`	Right value
`$bottom`	Bottom value
`$left`	Left value	null

Example Usage

.sample {
  @include photo-credit($top: 0);
}

Compiled Output

.sample {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: auto;
  padding: 5px 10px;
  background-color: rgba(primary-color(black), .7);
  @include rem(font-size, 15px);
  color: primary-color(gray, tint3);
}

Source:global-scss/helpers/mixins/_photo-credit.scss, line 3

Rem Units

Converts a pixel value to rem and includes a pixel value as a fallback.

Definition

@mixin rem($properties, $values...) {
  @if type-of($properties) == "map" {
    @each $property, $values in $properties {
      @include rem($property, $values...);
    }
  } @else {
    @each $property in $properties {
      @if $rem-fallback or $rem-px-only {
        #{$property}: rem-convert(px, $values...);
      }
      @if not $rem-px-only {
        #{$property}: rem-convert(rem, $values...);
      }
    }
  }
}

Parameters:

Name	Description	Default Value
`$properties`	Properties to convert to rem	null
`$values`	Pixel values to convert	null

Example Usage

.sample {
  @include rem(font-size, 16px);
}

Compiled Output

.sample {
  font-size: 16px;
  font-size: 1rem;
}

Source:global-scss/helpers/mixins/_rem.scss, line 49

Screen-Reader Text

Visually hides elements but keeps them visible to search engines and screen readers.

Definition

@mixin sr-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  position: absolute;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Example Usage

.sample {
  @include sr-text;
}

Compiled Output

.sample {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  position: absolute;
  white-space: nowrap;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

Source:global-scss/helpers/mixins/_sr-text.scss, line 1

Text Gradient

Creates a text gradient effect where supported.

Definition

@mixin text-gradient($fallback-color, $gradient-value) {
  color: $fallback-color;
  @supports (background-clip: text) and (-webkit-text-fill-color: transparent) {
    background-image: $gradient-value;
    background-clip: text;
    -webkit-text-fill-color: transparent;
	 }
}

Parameters:

Name	Description	Default Value
`$fallback-color`	Fallback color (if not supported)	null
`$gradient-value`	Gradient values to apply	null

Example Usage

.sample {
  @include text-gradient(primary-color(blue), linear-gradient(to left, $green-gradient));
}

Compiled Output

.sample {
  color: #0273ba;
  background-image: linear-gradient(to left, #9fd64d, #75c170, #49ab95, #2297b6, #0086d2);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

Source:global-scss/helpers/mixins/_text-gradient.scss, line 1

ASCE Digital Style Guide

Sass Mixins

Absolute

Breakpoint Mixins

From

At

Between

To

Clearfix

Component Margin

Content Constraint

Hover

Font Clamp

Font Weight

Full Bleed

Grid Placement

Grid Placement

Icon

Kill bullets

Linear Gradient

Linear Gradient

Move

Photo Credit

Rem Units

Text Gradient