Are you first timer at lazacode.org? Why not join us and start exchange your programming knowledge with everyone. Register today!

SASS mixins

0 votes
101 views
added Aug 11, 2017 in SCSS by azhaer Corporal (1,070 points)
edited Jul 18 by LC Marshal
@mixin generate-sizes($class, $small, $medium, $big) {
    .#{$class}-small { font-size: $small; }
    .#{$class}-medium { font-size: $medium; }
    .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

Result:

.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

5 Responses

0 votes
responded Sep 13, 2017 by theoh_lee Corporal (810 points)
edited Jul 18 by LC Marshal
@mixin header-bg {
  background: -webkit-gradient(linear,left top,right top,from(#005c98),to(#363a94));
  background: linear-gradient(to right,#005c98 0,#363a94 100%);
}

@include header-bg;
0 votes
responded Jul 18 by LC Marshal Lieutenant (14,930 points)
/*justify position*/
@mixin justify-content ($position : start) {
  -webkit-box-pack: $position;
  -ms-flex-pack: $position;
  -webkit-justify-content: $position;
  -moz-box-pack: $position;
  justify-content: $position;
}
 
/*to use*/
@include justify-content ($position : center);
 
@mixin truncate ($line: 2) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: $line;
}
 
/*to use*/
@include truncate ($line: 3);
 
@mixin title-form {
  font-style: normal;
  font-weight: 200;
  color: #555;
  &:after {
    content: ":";
    margin-right: 10px;
  }
}
 
/*opacity*/
@mixin opacity($opacity: 0.5) {
    filter: alpha(opacity=$opacity*100);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=#{$opacity*100});
    opacity: $opacity;
}
/*to use*/
@include opacity ($opacity: 0.5);
 
/*Wrapper: mixin acts variable*/
@mixin block-wrapper {
  content:"";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
 
/*Icon before: mixin acts variable*/
@mixin icon-before {
  font-family: FontAwesome;
  content: "";
  margin-right: 6px;
}
 
/*For gradient effect on background*/
@mixin brand-gradient {
    background: $brand_purple; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left, $brand_purple , $brand_pink); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, $brand_purple, $brand_pink); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, $brand_purple, $brand_pink); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, $brand_purple , $brand_pink); /* Standard syntax */
}
 
/*For inner gradient effect on icon*/
@mixin icon-gradient {
    background: -webkit-linear-gradient(left, $brand_purple , $brand_pink); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, $brand_purple, $brand_pink); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, $brand_purple, $brand_pink); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, $brand_purple , $brand_pink);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
 
/*For inner gradient effect on icon:hover*/
@mixin icon-gradient-hover {
    background: none;
    -webkit-text-fill-color: #fff;
}

 

0 votes
responded Jul 24 by LC Marshal Lieutenant (14,930 points)
// for font and border color of button

@mixin el-button ($color-el, $border-el) {
  padding: 5px 8px; 
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 3px;
  color: $color-el;
  border: 1px solid $border-el;
}

a {
  &.view-units-pl {
    @include el-button($color-blue-light, $color-blue-light);
    &:hover {
      background: $color-blue-light;
      color: #fff;
    }
  }
}

 

0 votes
responded Jul 25 by LC Marshal Lieutenant (14,930 points)
// mixins for background color
@mixin bg-color ($bgcolor) {
  background: $bgcolor;
  padding: 20px;
}

// class
.container {
  &-80 {
    margin: 0 auto;
    width: 80%;
    max-width: 700px;
  }
  &-bg-grey {
    @include bg-color ($color-grey-light);
  }
  &-bg-calm {
    @include bg-color ($color-blue-calm);
  }
}

 

0 votes
responded Aug 7 by LC Marshal Lieutenant (14,930 points)
/*for margin top margin bottom*/

@mixin m-bottop ($mbt) {
  margin-top: $mbt;
  margin-bottom: $mbt;
}

/*to use*/
.box {
  background: blue;
  @include m-bottop(15px);
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...