aryan's SCSS COMPLETE GUIDE Part-2

note: I will not always show CSS version of my code.
note: It is a three part series. (if link are taking you at the same blog then links are not updated yet. waiting...)
one
three

SCSS @mixin

mixin are resuable css code in your scss.

@mixin name{
  property:value;
  property2:value;
}
selector{
  @include mixin-name;
}

@mixin important-text{
  color:red;
  font-size:25px;
  font-weight:bold;
  border:1px solid blue;
}
.danger{
  @include important-text;
  background-color:red;
}

@mixin can also have other mixin elements

@mixin special-text{
  @include link;
  @include important;
}

passing variable to mixin

@mixin border($color,$width){
border:$width solid $color;
}
.myArticle{
  @include bordered(blue,1px); /* border: 1px solid blue*/
}
.para{
  @include bordered(orange,2px); /*  border:2px solid orange*/
}

mixin default values

@mixin bordered($color:blue,$width){
  border:$width solid $color;
}
.para{
  @included bordered($width:2px) /*specify the value only*/
}

🔗mylinkedin

learning resources

🧡Scaler - India's Leading software E-learning
🧡w3schools - for web developers