SCSS - Interpolation

style.scss

@import "mixins";

@include small-box(red);
@include small-box(pink);
@include small-box(yellow);
@include small-box(black);

_mixins.scss

@mixin small-box($color){
  .small-box-#{$color} -->#{} is interpolation
  {
    width: 50px;
    height:50px;
    border: 1px solid black;
    color: $color;
  }
}
Output:
.small-box-red {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  color: red;
}

.small-box-pink {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  color: pink;
}

.small-box-yellow {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  color: yellow;
}

.small-box-black {
  width: 50px;
  height: 50px;
  border: 1px solid black;
  color: black;
}

To make it better;

style.scss

@import "mixins";

@include small-box(red);
@include small-box(pink);
@include small-box(yellow);
@include small-box(black);

_mixins.scss

@mixin small-box($color){
  .small-box-#{$color} -->#{} is interpolation
  {
    @extend %small-box;
    color: $color;
  }
}

_placeholder.scss

%small-box{
  width: 50px;
  height:50px;
  border: 1px solid black;
}

Output:

.small-box-black, .small-box-yellow, .small-box-pink, .small-box-red {
  width: 50px;
  height: 50px;
  border: 1px solid black;
}

.small-box-red {
  color: red;
}

.small-box-pink {
  color: pink;
}

.small-box-yellow {
  color: yellow;
}

.small-box-black {
  color: black;
}

Bu blogdaki popüler yayınlar

SDLC - Software Development Life Cycle

@SerializedName and @Expose annotations