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;
   }
  }

---

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: blue;
  position: relative;
  
   &::before {
    @include triangle(up, 2rem, 1rem, blue);//mixin
    position: absolute;
    content: "";
    //position triangle on box
    top:-1rem;
    left:6rem;
   }
  }

---

position

//see css/root/_position.scss
     .position {
      @include size(300px, 5em);
      @include center;
      border: 1px solid var(--first);
      position: relative;
      div {
       @include position(absolute, 10px 30px 30px 0);
       background-color: var(--bg);
      }
     }

//see css/root/_position.scss
     .position-two {
      @include size(300px, 5em);
      @include center;
      border: 1px solid var(--first);
      position: relative;
      div {
       @include size(100px, 20px);
       @include position(absolute, 10px null null 0);
       background-color: var(--bg);
      }
     }

---

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;
    }

---