@mixin
Mixin allows you to define style that can be re-used throughout your stylesheet.
(They make it easy to avoid using non-semantic classes like .float-left, and to distribute collections of styles in libraries.)
How to use @mixin
@mixin name{ ... } //create
@include name(arguments..) //use
You can make a file and import or can declare mixin in the file you are working. If you'd like to make multiple mixin and use, create _mixins.scss to manage.
Using @mixin
// SCSS
@mixin center-xy{
display: flex;
justify-content : center;
align-items : center;
}
// You can used @mixin center-xy like below, It's done by one line because of @mixin
.card{
@include center-xy;
}
.aside{
@include center-xy;
}
**But putting all the code inside one @mixin isn't a good way of using it. You should add related styles in @mixin so that you can make more reusable set.
Arguments
@mixin can take arguments after its name. It allows their behavior to be customised when they are called.
SCSS
//SCSS
@mixin image-style($ul, $size, $repeat, $positionX, $positionY) {
background-image: url($ul);
background-size: $size;
background-repeat: $repeat;
background-position: $positionX $positionY;
}
//background related code.
//You can style element differently depending
arguments of mixin.
.profile {
@include image-style("./assets/user.jpg", cover, no-repeat, center, center);
}
.box-one {
@include image-style(url("/images/poster1.svg"), cover, no-repeat, 40%, 50%);
}
CSS
/* CSS */
.profile {
background-image: url("./assets/user.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.box-one {
background-image: url(url("/images/poster1.svg"));
background-size: cover;
background-repeat: no-repeat;
background-position: 40% 50%;
}
Setting default value
// SCSS
// $positionX, $positionY have default value now. If they don't receive value, it takes default value.
@mixin image-style($ul, $size, $repeat, $positionX : 50%, $positionY : 50%) {
background-image: url($ul);
background-size: $size;
background-repeat: $repeat;
background-position: $positionX $positionY;
}
.profile {
@include image-style("./assets/user.jpg", cover, no-repeat);
}
/* CSS */
.profile {
background-image: url("./assets/user.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
// profile and .box-one are not related elements but because they have similar styles related to background, you can make @mixin about the background and use them to each elements instead of repeating code.
Top comments (0)