Tag: Sass Code Snippets

Vendor Prefix Sass Mixin

Vendor prefixes is where browser vendors add prefixes to experimental or non-standard CSS properties. This tutorial will show you how-to create a vendor prefix Sass mixin, so you don’t need to remember to add them to certain CSS properties or type them out.

BEM Sass Mixins

The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology. BEM Sass Mixins The Sass mixin for BEM element is: // BEM…

Radial Gradient Background Sass Mixin

In a previous tutorial, I showed you two Sass mixins to create linear gradient backgrounds. In this tutorial, I’m going to show you how-to create a single radial…

Border Sass Mixin

The following are two (2) Sass mixins for the CSS border properties. The first mixin is for the border shorthand property and the second mixin is for specifying…

Border Radius Sass Mixin

In this tutorial, I’m going to show you five (5) Sass mixins for the CSS3 border-radius property. The first one will be for multiple sides (shorthand) and the…

Padding Sass Mixin

The following are two (2) Sass mixins for the CSS padding property. The first mixin is for the padding shorthand property and the second mixin is for specifying…

Margin Sass Mixin

The following are two (2) Sass mixins for the CSS margin property. The first mixin is for the margin shorthand property and the second mixin is for specifying…

Border Image Sass Mixin

The following is a Sass mixin for the CSS3 border-image property. It sets an image as the border. @mixin border-image($source, $slice, $width, $outset, $repeat) { border-image-source: url($source); border-image-slice:…

Striped Background Gradient Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”vKygKe” defaulttab=”result” user=”brandonhimpfen”]See the Pen Striped Gradient Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following is a Sass mixin that will create a striped background…

Horizontal Background Gradient Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”xGBjvV” defaulttab=”result” user=”brandonhimpfen”]See the Pen Left to Right Linear Gradient Background by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following Sass mixin will create a horizontal background…

Vertical Background Gradient Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”doreEN” defaulttab=”result” user=”brandonhimpfen”]See the Pen Top to Bottom Linear Background Gradient by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following Sass mixin will create a vertical background…

Radial Background Gradient Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”dorKoW” defaulttab=”result” user=”brandonhimpfen”]See the Pen Radial Background Gradient Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following is a Sass mixin that creates a radial…

Centering Sass Mixin

[codepenembed height=”300″ themeid=”16787″ slughash=”OXRGjP” defaulttab=”result” user=”brandonhimpfen”]See the Pen Centering Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen.[/codepen_embed]The following Sass mixin will allow you to center horizontally and vertically…