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

SASS mixins

0 votes
47 views
added Aug 11, 2017 in SASS by azhaer Corporal (1,110 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, 2017 by birdygeek Sergeant (2,060 points)
[no viewer found for format: markdown]
0 votes
responded Aug 17, 2017 by azhaer Corporal (1,110 points)
[no viewer found for format: markdown]
0 votes
responded Sep 13, 2017 by theoh_lee Corporal (810 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;
lazacode.org - Malaysia based Knowledge Exchange Platform, where you can share your finding or solution with other members of community.
...