Scss Mixins including user and Bourbon Mixins

To see the full code for the mixins see css/root/mixins.scss

-- Links --

background Center Elements hide from screenreaders media breakpoints ellipsis

-- Mixins --

background

@mixin background($background-color: $background) {
    background: $background-color;
  }
  
  .background {
    @include background($success-color);//mixin
    @include size(300px, 100px);
    @include center;
  }

Center Elements

.center-element {
    @include center;//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;
    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

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

border radius

@include border-top-radius(15px);
  @include border-bottom-radius(10px);

@include border-left-radius(10px);
  @include border-right-radius(5px);

ellipsis

@include ellipsis;

Hover over me to see the ellipsis in action

hide text

.hide-text {
    @include size(220px, 120px);
    @include center;
    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;
    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

size

@include size(300px, 1.8em);

triangle

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