Skip to content

Latest commit

 

History

History
679 lines (546 loc) · 9.06 KB

mixins.md

File metadata and controls

679 lines (546 loc) · 9.06 KB
Raw

Sass Mixins

This is my personal mixin library, gathered over the years.

Table of contents

Aspect Ratio

Keep an element respecting a given aspect ratio

Use:
.foo {
  @include aspect-ratio(800, 400);
}
Output:
.foo {
  position: relative;
}
.foo {
  display: block;
  content: ' ';
  width: 100%;
  padding-top: 50%;
}
.foo > .foo__inner {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

BEM

BEM style mixin

Use:
.foo {
  foo: block;

  @include e('element') {
    foo: element;
  }

  @include m('modifier') {
    foo: modifier;
  }
}

/* Nested */

.foo {
  foo: block;

  @include e('element') {
    foo: element;
    @include m('modifier') {
      foo: element--modifier;
    }
  }

  @include m('modifier') {
    foo: modifier;
    @include e('element') {
      foo: modifier__element;
    }
  }
}
Output:
.foo {
  foo: block;
}
.foo__element {
  foo: block__element;
}
.foo--modifier {
  foo: block--modifier;
}

/- Nested */

.foo {
  foo: block;
}
.foo__element {
  foo: block__element;
}
.foo__element--modifier {
  foo: block__element--modifier;
}
.foo--modifier {
  foo: block--modifier;
}
.foo--modifier__element {
  foo: block--modifier__element;
}

Centerer

Center an element using position absolute and translate

Use:
.foo {
  @include centerer();
}

.foo--both {
  @include centerer(both); // both or b
}

.foo--horizontal {
  @include centerer(horizontal); // horizontal or h
}

.foo--vertical {
  @include centerer(vertical); // vertical or v
}

.foo--remove {
  @include centerer-remove();
}

.foo--remove--pos {
  @include centerer-remove(absolute);
}
Output:
.foo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.foo--both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.foo--horizontal {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

.foo--vertical {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

.foo--remove {
  position: relative;
  top: auto;
  left: auto;
  transform: translate(0, 0);
}

.foo--remove--pos {
  position: absolute;
  top: auto;
  left: auto;
  transform: translate(0, 0);
}

Clearfix

No comment

Use:
.foo {
    @include clearfix();
}
Output:
.foo:after {
  content: '';
  display: table;
  clear: both;
}

Equal padding inline element

Equal padding on an inline element like a span, when the content breaks because of screen size

Use:
.foo {
  @include equal-padding-inline-span(red, 1em);
}
Output:
.foo {
  display: inline;
  background-color: red;
  box-shadow: 1em 0 red, -1em 0 red;
  vertical-align: sub;
}

Flexvideo

Responsive video

Use:
.foo {
  @include video-container();
}
Output:
.foo {
  position: relative;
  max-width: 800px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.foo__inner {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: auto;
}
.foo__inner > iframe, .foo__inner > object, .foo__inner > embed, .foo__inner > video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Font Face

Declare @font-face
Uses the str-replace and assets functions

Use:
@include font-face('fontname', 'fontfile', 'fontfolder', weight, style, eot woff2 woff ttf svg);
Output:
@font-face {
  font-family: 'fontname';
  font-weight: weight;
  font-style: style;
  src: url("../assets/fonts/fontfolder/fontfile.eot");
  src: url("../assets/fonts/fontfolder/fontfile.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/fontfolder/fontfile.woff2") format("woff2"), url("../assets/fonts/fontfolder/fontfile.woff") format("woff"), url("../assets/fonts/fontfolder/fontfile.ttf") format("truetype"), url("../assets/fonts/fontfolder/fontfile.svg#fontname") format("svg");
}

Ghost arrow

An arrow mixin based on a square with borders on two sides declared and rotated

Use:
.foo {
  @include ghost-arrow($size: 16px, $color: red, $width: 1px, $direction: right);
}
Output:
.foo {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: red;
  transform: rotate(-45deg);
}

Hamburger

A hamburger menu mixin

Use:
.foo {
  @include hamburger($size: 30px, $size-inner-width: 70%, $size-inner-height: 2px, $size-inner-offset: 8px);
}
Output:
.foo {
  width: 30px;
  height: 30px;
}
.foo__inner, .foo__inner:before, .foo__inner:after {
  background: #fff;
  display: block;
  position: absolute;
  height: 2px;
}
.foo__inner {
  width: 70%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.foo__inner:before, .foo__inner:after {
  content: '';
  width: 100%;
}
.foo__inner:before {
  bottom: 8px;
}
.foo__inner:after {
  top: 8px;
}

Hide text

Hide text from an element to be replaced by an image, for accessibility purposes

Use:
.foo {
  width: 200px;
  height: 100px;
  @include hidetext();
}
Output:
.foo {
  width: 200px;
  height: 100px;
  overflow: hidden;
}
.foo:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
}

Media queries

Some mediaqueries

Available shortcuts:
@include above($bp){};
@include below($bp){};
@include between($bp1, $bp2){};
@include orientation($orientation){};
@include landscape(){};
@include portrait(){};

@include iphone6plus(null/portrait/landscape){};
@include iphone6(null/portrait/landscape){};
@include iphone5(null/portrait/landscape){};
@include iphone4(null/portrait/landscape){};

More will follow

Optional @at-root

Helper mixin to check if ruleset is at root level

Use:
@include optional-at-root('::-moz-selection') {
  @content;
}

Placeholder

Use:
@include placeholder {
  color: red;
}

.foo {
  @include placeholder {
    color: blue;
  }
}
Output:
::-webkit-input-placeholder {
  color: red;
}
:-moz-placeholder {
  color: red;
}
::-moz-placeholder {
  color: red;
}
:-ms-input-placeholder {
  color: red;
}

.foo::-webkit-input-placeholder {
  color: blue;
}
.foo:-moz-placeholder {
  color: blue;
}
.foo::-moz-placeholder {
  color: blue;
}
.foo:-ms-input-placeholder {
  color: blue;
}

Position

Position shorthand

Use:
.foo {
  @include position(absolute);
}

.foo--bar {
  @include position(absolute, $top: 0, $right: 20px);
}

.foo--baz {
  @include position(absolute, 10px, 0, 30px, 1em);
}
Output:
.foo {
  position: absolute;
}

.foo--bar {
  position: absolute;
  top: 0;
  right: 20px;
}

.foo--baz {
  position: absolute;
  top: 10px;
  right: 0;
  bottom: 30px;
  left: 1em;
}

Qualify

Qualify a class from within its ruleset

Use:
.foo {
  border: none;

  @include qualify(button) {
    -webkit-appearance: none;
  }

  // @alias qualify
  @include when-is(a) {
    text-decoration: none;
  }
}
Output:
.foo {
  border: none;
}
button.foo {
  -webkit-appearance: none;
}
a.foo {
  text-decoration: none;
}

Selection

Selection styles mixin

Use:
@include selection {
  background: red;
}

.foo {
  @include selection {
    background: red;
  }
}
Output:
::-moz-selection {
  background: red;
}
:selection {
  background: red;
}
.foo::-moz-selection {
  background: blue;
}
.foo:selection {
  background: blue;
}

Size

Size shortcut mixins

Use:
.foo--size {
  @include size(30px, 100px);
}

.foo--size--square {
  @include size(30px);
}

.foo--square {
  @include square(30px);
}

.foo--circle {
  @include circle(30px);
}
Output:
.foo--size {
  width: 30px;
  height: 100px;
}

.foo--size--square {
  width: 30px;
  height: 30px;
}

.foo--square {
  width: 30px;
  height: 30px;
}

.foo--circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

Triangle

Make a triangle using the border method

Use:
.foo {
  @include triangle(red, left);
}
Output:
.foo {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent red;
}

Docs

Sass
Stylus