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










@SerializedName and @Expose annotations





















 The  @SerializedName  annotation is needed for Gson to map the JSON keys with our fields. In keeping with Java's camelCase naming convention for class member properties, it is not recommended to use underscores to separate words in a variable.  @SerializedName  helps translate between the two.    @SerializedName ( "quota_remaining" )  @Expose   private  Integer quotaRemaining;    In the example above, we are telling Gson that our JSON key  quota_remaining  should be mapped to the Java field  quotaRemaining .  If both of these values were the same, i.e. if our JSON key was  quotaRemaining  just like the Java field, then there would be no need for the  @SerializedName  annotation on the field because Gson would map them automatically.   The  @Expose  annotation indicates that this member should be exposed for JSON serialization or deserialization.   








Devamı










About Android padding, margin, width, height, wrap_content, match_parent, R Class





















 Padding and Margin   padding  and  layout_margin  are two very similar attributes. Both determine the space around a View. The difference is that  padding  determines space within the boundaries of the view, and  layout_margin  determines the space outside the boundaries of the view.   Width and Height   Some of the most important properties are the width property and height property - those must be defined for every view. Remember that all views occupy a rectangular area on the screen - the width and height are the width and height of that area. You can define this in pixels, or better yet dp (stands for density-independent pixels):  android:layout_width="200dp" android:layout_height="300dp"   For the sake of having a layout be responsive and adjust to different devices, two common values are not numbers at all, but  wrap_content  and  match_parent  used as shown here:  android:layout_width="wrap_content" android:layout_height="match_parent"   








Devamı