Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
November 26, 2021 02:59 pm GMT

Sass(SCSS) @mixin, @extend

@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.

Original Link: https://dev.to/daaahailey/sassscss-mixin-extend-220n

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To