7 SASS mixins you must have in your project


1. Breakpoints
Mixin
@mixin breakpoint-desktop{
  @media only screen and (max-width: 1200px) {
    @content;
  }
}

@mixin breakpoint-tablet{
  @media only screen and (max-width: 1024px) {
    @content;
  }
}

@mixin breakpoint-mobile{
  @media only screen and (max-width: 768px) {
    @content;
  }
}

Code Structure
.content{
  float: left;
  width: 60%;

  @include breakpoint-tablet {
    float: none;
    width: 100%;
  }
}

Result
.content{
  float: left;
  width: 60%;

  @media only screen and (max-width: 768px) {
    float: none;
    width: 100%;
  }
}
    

2. Transition
Mixin
@mixin transition($value) {
  -webkit-transition: $value;
  -moz-transition: $value;
  -ms-transition: $value;
  -o-transition: $value;
  transition: $value;
 }
    

Code Structure
a {
  @include transition(color .3s ease);
  color: gray;
       
  &:hover {
    color: black;
  }
 }
    

3. Clearfix
Mixin
%clearfix {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}
    

Code Structure
.container{
  @extend %clearfix;
}
    

4. Cross Browser Opacity
Mixin
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}
    

Code Structure
.fadetext {
  @include opacity(0.7);
}
    

5. Set REM Font Size
Mixin
@mixin font-size($sizeValue: 1.6) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
}
    

Code Structure
p{
  @include font-size(13);
}
    

6. Hide Text
Mixin
@mixin hide-text {
  overflow: hidden;
  text-indent: 101%;
  white-space: nowrap;
}
    

Code Structure
p{
  @include hide-text;
}
    

7. List Reset
Mixin
%list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}
     

Code Structure
ul{
  @extend %list-reset;
}
     

Share this

Related Posts