Portland Community College | Portland, Oregon

Sass mixins

There is repeated code we use in our Sass stylesheets to make sure things are consistent throughout the stylesheet. Mixins make it so you don’t have to repeat the same chunks of code over and over, which cuts down on development time and leaves less room for human error. Mixins are essentially the same as variables but include chunks of code instead of single values.

• Call mixins in Sass using @include.
• Some mixins take arguments, some don’t. Arguments must be in the order as shown below. You can pass variables as arguments.
• Learn how to use Sass mixins.

Stylesheet location: /_source/styles/base/_mixins.scss

Jump to a component:

• Align form input and button
• Background photo
• Clearfix
• Font Awesome
• Font mixins
• Shadows
• Visually hide

Align form input and button

In some simple forms, it looks better to have the input and button aligned side-by-side rather than the default stacked layout. Doesn’t take arguments.

How to use for Align form input and button

@include align-form-horizontal;

Background photo

The background photo mixin creates an image overlaid with a solid color. The image must be black and white, and certain types and crops of images work best – learn more about custom background images.

How to use for Background photo

@include bg-photo($color, $opacity, $url);

• $color: the color of the overlay – color variable, HEX, or RGB
• $opacity: opacity of the overlay – 0.x
• $url: path to the image inside single quotes

Clearfix

The clearfix mixin clears floated sections of code, which is helpful for more complicated layouts. Doesn’t take arguments. You can also use the .clearfix class in HTML – see clearfix.

How to use for Clearfix

@include clearfix;

Font Awesome

The Font Awesome mixin lets you include Font Awesome icons in CSS. You can also include them in page content.

How to use for Font Awesome

@include font-awesome($color, $icon, $size);

• $color: icon color – color variable, HEX, or RGB
• $icon: icon’s Unicode, inside double quotes (ex: “\f105” for one right arrow, or “\f105 \f105” for double right arrows)
• $size: icon size (use the em font size function)

Font mixins

Use the font face mixin to create the font stack for our @font-face custom fonts (not for general use).

The headings, regular, italic, bold, and light font mixins run the @font-face mixin with the corresponding font. They don’t take arguments – the mixin specifies the font name, style, and weight. Use the mixin whenever you declare the heading font in CSS – include it first, above other rules.

More information about how to use the mixins is on the typography basics page under “development info”.

How to use for Font mixins

• Headings: @include font-heading;
• Regular text: @include font;
• Italic text: @include font-italic;
• Bold text: @include font-bold;
• Light text: @include font-light; (global navigation only)

Shadows

Many components on the website have a shadow on the bottom and right sides. This gives them a modern and interactive look. The shadow mixin takes a single color argument, which darkens that color by 15% and uses it as the shadow. The mixin applies the necessary border radius, as well.

How to use for Shadows

@include shadow($color);

• $color: the color of the component getting the shadow, use a color variable if possible

Visually hide

Used to hide content visually but not for screen readers. Doesn’t take arguments.

How to use for Visually hide

@include visually-hide;