Scss Mixins

center elements

.center-element {
  @include center;//mixin
  background: #E03D44;
  @include size(80%, 60px);
  }
  
  // this may need display: block to work in some cases
  @mixin center {
   margin-left: auto;
   margin-right: auto;
  }

---

hide

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

---

show

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

---

media breakpoints

Base styles are phone-first

.media-points p {
   color: red;
  }
  
  @include media(600) {
   .media-points p {
    color: blue;
   }
  }
  
  @include media(700) {
   .media-points p {
    color: rgb(153, 71, 236);
   }
  }
  
  @include media(934) {
   .media-points p {
    color: rgb(34, 224, 126);
   }
  }
  
   @include media(93rem) {
   .media-points p {
    color: rgb(235, 220, 85);
   }
  }
  
  @mixin media($point) {
   // Convert unitless numbers to px, otherwise use the provided unit
   $breakpoint: if(math.is-unitless($point), #{$point}px, $point);
   @media only screen and (min-width: $breakpoint) {
    @content;
   }
  }

---

border

//see css/root/_direction.scss and _border-radius.scss
  .show-border {
   @include size(300px, 80px);
   @include center;
  
   //mixins
   @include border-top-radius(20px);
   @include border-bottom-radius(10px);
   @include border-width(5px 0.9em 2ex $small-spacer);
   @include border-style(solid double inset dotted);
   @include border-color(green blue $first-color rgb(199, 199, 36));
  }

//see css/root/_direction.scss and _border-radius.scss
  .show-border-two {
   @include size(300px, 80px);
   @include center;
  
   //mixins
   @include border-left-radius(20px);
   @include border-right-radius(25px);
   @include border-width(thick 0.8ex null 1.25ex);
   @include border-style(dashed dotted null groove);
   @include border-color(hsl(60 90% 50% / 0.8) blue null rgb(255 0 0));
  }

---

ellipsis

.ellipsis {
  @include size(300px, 80px);
  @include center;
  font-size: 1.1rem;
  padding: 10px;
  border: 1px solid blue;
   &:hover span {
    @include ellipsis;//mixin
   }
  }
  
  @mixin ellipsis($width: 100%, $display: inline-block) {
   display: $display;
   max-width: $width;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
  }

---

triangle

//see css/root/_mixins.scss
  .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;
   }
  }

---

position

//see css/root/_mixins.scss
  .position {
  @include size(300px, 5em);
  @include center;
  border: 1px solid blue;
  position: relative;
   div {
    //no size needed
    @include position(absolute, 10px 30px 30px 0);//mixin
    background-color: rgba(39, 44, 49, 0.3);
   }
  }

//see css/root/_mixins.scss
  .position-two {
  @include size(300px, 5em);
  @include center;
  border: 1px solid red;
  position: relative;
   div {
   @include size(100px, 20px);
   @include position(absolute, 10px null null 0);//mixin
   background-color: rgba(39, 44, 49, 0.3);
   }
  }

---

margin

//see css/root/_direction.scss
    .margin {
    @include size(300px, 5em);
    @include center;
    border: 1px solid red;
     div {
      @include size(80px, 50px);
      @include margin(30px null null 40px);//mixin
      border: 1px solid blue;
     }
    }

---

padding

//see css/root/_direction.scss
    .padding {
    max-width: 500px;
    @include center;
    border: 1px solid red;
    @include padding(15px 20px);//mixin
    }

---

size

//see css/root/_size.scss
    .size {
    @include size(300px, 1.8em);//mixin
     border: 1px solid blue;
    }

//see css/root/_size.scss
    .size-two {
    @include size(auto, 5em);//mixin
    @include center;
    border: 1px solid red;
    }

---

buttons

//see css/root/_buttons-inputs.scss
    //see css/base/_button.scss for inherited styles
    .buttons {
     #{$all-buttons} {
      padding: 15px 40px;
      font-size: $secondary;
      background-color: red;
      color: white;
      transition: background-color $duration $timing;
       @media (hover: hover) {
        &:hover {
         background-color: blue;
       }
      }
     }
    }

---

text-inputs

//see css/root/_buttons-inputs.scss
    //see css/base/_form.scss for inherited styles
    .text-inputs {
    #{$all-text-inputs} {
    width: 300px;
    @include padding(10px 5px);
    @include margin($medium-spacer auto);
     }
    }

---

shade

//see css/root/_shade-tint.scss
    .shade {
    @include size(300px, 100px);
    @include center;
    background-color: shade(blue, 40%);//mix with black
     }

---

tint

//see css/root/_shade-tint.scss
    .tint {
    @include size(300px, 100px);
    @include center;
    background-color: tint(blue, 40%);//mix with white
     }

---