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 Element @mixin element($element) { &__#{$element} { @content; } } The Sass mixin for BEM modifier is: // BEM Modifier @mixin modifier($modifier) { &–#{$modifier} { @content; } } … Continue reading BEM Sass Mixins

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 gradient background Sass mixin.Example See the Pen Radial Background Gradient Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen. Radial Gradient Background Sass Mixin: // Background Gradient: Radial … Continue reading Radial Gradient Background Sass Mixin

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 individual CSS border properties.You can include both mixins in your project and use only one or both. Border – Shorthand property For the border shorthand property, the … Continue reading Border Sass Mixin

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 other four Sass mixins will be for each side: top, right, bottom and left. Border Radius – Shorthand property The Sass mixin for the CSS3 border-radius shorthand … Continue reading Border Radius Sass Mixin

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 individual sides.You can include both mixins in your project and use only one or both. Padding – Shorthand property For the padding shorthand property, the Sass mixin … Continue reading Padding Sass Mixin

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 individual sides.You can include both mixins in your project and use only one or both. Margin – Shorthand property For the margin shorthand property, the Sass mixin … Continue reading Margin Sass Mixin

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: $slice; border-image-width: $width; border-image-outset: $outset; border-image-repeat: $repeat; -webkit-border-image: url($source) $slice $width $outset $repeat; -o-border-image: url($source) $slice $width $outset $repeat; } Here is an example of how-to include … Continue reading Border Image Sass Mixin

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 gradient. The striped background gradient can be applied to the body or an HTML element. // Striped Background Gradient Sass Mixin // See: http://www.himpfen.com/striped-background-gradient-sass-mixin/ // Usage: @include … Continue reading Striped Background Gradient Sass Mixin

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 gradient, also known as a left to right (or right to left) background gradient. // Horizontal (Left to Right) Background Gradient // See: http://www.himpfen.com/horizontal-background-gradient-sass-mixin/ // Usage: @include … Continue reading Horizontal Background Gradient Sass Mixin