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

SASS mixins

0 votes
44 views
added Aug 11 in SASS by azhaer Corporal (1,050 points)
@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; }
   

3 Responses

0 votes
responded Aug 17 by birdygeek Sergeant (1,960 points)

@mixin truncate($truncation-boundary) {
max-width: $truncation-boundary;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

@include truncate(100%);

0 votes
responded Aug 17 by azhaer Corporal (1,050 points)

//Padding mixin
@mixin padding($top, $right, $bottom, $left) {
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
padding-left: $left;
}

@include padding(1px, null, 3px, 4px);

0 votes
responded Sep 13 by theoh_lee Lance Corporal (710 points)
@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;
...