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*/
}
learning resources
🧡Scaler - India's Leading software E-learning
🧡w3schools - for web developers
Top comments (0)