Scss Mixins including user and Bourbon Mixins

To see the full code for the user mixins see css/base/mixins.scss
To see the full code for the Bourbon mixins see The Bourbon Docs

-- Links --

-- User Mixins --

background

@mixin background($background-color: $background) {
    background: $background-color;
    box-shadow: inset 0 0 4px darken($background-color, 7%);
  }
  
  .background {
    @include background($success-color);//mixin
    @include size(300px, 100px);
    @include center-block;
  }

Center Elements

.center-element {
    @include center-block;//mixin
    @include background(#E03D44);
    @include size(80%, 60px);
  }

hide from both screenreaders and browsers

@mixin hidden {
    display: none !important;
    visibility: hidden;
  }
  
  .hidden-box {
    @include size(300px, 70px);
    @include center-block;
    padding: 7px;
    font-size: .9rem;
    color: orange;
    border: 1px solid blue;
    
    &:hover span {
      @include hidden;//mixin
    }
  }

This text will hide on hover and be invisible to screen readers and browsers

placeholders

input {
    @include placeholder {
    color: red;
    }
  }

media breakpoints

Base styles are phone-first

.media-points p {
    color: red;
  }
  
  @include media(700) {
    .media-points p {
      color: blue;
    }
  }
  
  @include media(900) {
    .media-points p {
      color: rebeccapurple;
    }
  }

At base level this text is red
At 700px this text is blue
At 900px this text is purple

To see the full code for the user mixins see css/base/mixins.scss

-- Bourbon Mixins --

border

@include border-color(#a60b55 #76cd9c null #e8ae1a);
  @include border-top-radius(15px);
  @include border-bottom-radius(10px);
  @include border-style(dashed solid dotted);
  @include border-width(.7em 3px 10px);

buttons

#{$all-buttons} {
  background-color: #f00;
  }
  
  #{$all-buttons-active} {
      background-color: #00f;
  }
  
  #{$all-buttons-focus} {
    background-color: #0f0;
  }
  
  #{$all-buttons-hover} {
    background-color: #0f0;
  }//See css/base/_form.scss to see how the themes uses buttons

clearfix

@include clearfix;

constrast switch

.contrast {
    @include size(300px, 30px);
    @include center-block;
    $button-color: #2d72d9;
    background-color: $button-color;
    a {
      color: contrast-switch($button-color, #222, #eee);//mixin
    }
  }

See the Bourbon docs

ellipsis

@include ellipsis;

Hover over me to see the ellipsis in action

@fontface

@include font-face(
    "source-sans-pro",
    "fonts/source-sans-pro-regular",
    ("woff2", "woff")
    {
    font-style: normal;
    font-weight: 400;
    }
  //See css/base/_fonts.scss to see the themes use of this mixin

font-stacks

font-family: $font-stack-helvetica;
  font-family: $font-stack-lucida-grande;
  font-family: $font-stack-verdana;
  font-family: $font-stack-system;
  font-family: $font-stack-garamond;
  font-family: $font-stack-georgia;
  font-family: $font-stack-hoefler-text;
  font-family: $font-stack-consolas;
  font-family: $font-stack-courier-new;
  font-family: $font-stack-monaco;

hide text

.hide-text {
    @include size(220px, 120px);
    @include center-block;
    padding: 7px;
    border: 1px solid blue;
  
    &:hover {
      @include hide-text;//mixin
      background: url(../test-images/taj-mahal.jpg);
      background-repeat: no-repeat;
      background-size: cover;
    }
  }

On hover replace text with image, text still available for SEO

hide visually

.hide-visually {
    @include size(220px, 120px);
    @include center-block;
    font-size: .9rem;
    padding: 7px;
    border: 1px solid blue;
    
    span {
      font-size: 1.3rem;
      color:#a60b55;
      @include hide-visually;//mixin
    }
    &:hover span {
      @include hide-visually("unhide");//alt mixin
    }
  }

Box title is hidden but still available to screen readers, hover to view
Box Title

margin

@include margin(10px null null 20px);

MARGIN

module scale

$bourbon: (
  "modular-scale-ratio": 1.2,
  );
  .element {
  font-size: modular-scale(3);
  }

Modular Scale

overflow wrap (break word)

@include overflow-wrap;
  //hover to see overflow-wrap

Thisisaveryveryveryveryveryveryveryveryveryveryveryverylongword

padding

@include padding(10px null null 20px);

PADDING

position

@include position(absolute, 20px null null 20px);

prefixer

.element {
    @include prefixer(appearance, none, ("webkit", "moz"));
  }
  
  //CSS Output
  .element {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

shade

background-color: shade(#ffbb52, 30%);

size

@include size(300px, 1.8em);

strip unit

$dimension: strip-unit(10em);
  
  //Output
  $dimension: 10;

text inputs

#{$all-text-inputs} {
    border: 1px solid #ccc;
  }
  
  #{$all-text-inputs-active} {
    border: 1px solid #aaa;
  }
  
  #{$all-text-inputs-focus} {
    border: 1px solid #1565c0;
  }
  
  #{$all-text-inputs-hover} {
    border: 1px solid #aaa;
  }
  
  #{$all-text-inputs-invalid} {
    border: 1px solid #00f;
  }

tint

background-color: tint(#ffbb52, 30%);

triangle

.element {
    @include size(300px, 50px);
    @include center-block;
    background-color: #b25c9c;
    position: relative;
    
    &::before {
      @include triangle("up", 2rem, 1rem, #b25c9c);//mixin
      position: absolute;
      content: "";
      //position triangle on box
      top:-1rem; 
      left:6rem;
    }
  }

value prefixer

@include value-prefixer(cursor, grab, ("webkit", "moz"));
  
  //CSS Output
  .element {
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
  }

To see the full code for the Bourbon mixins see The Bourbon Docs