An Interest In:
Web News this Week
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
- March 14, 2024
- March 13, 2024
- March 12, 2024
November 26, 2021 02:59 pm GMT
Original Link: https://dev.to/daaahailey/sassscss-mixin-extend-220n
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:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To