CODEWITHSUNDEEP
csssass
Yan Naing
Yan Naing

Reputation: 15

how to use multiple selector or nested selector in scss mixin

I want to get css code like this

.img-wrapper {
    width: 100px;
    height: 100px;
    overflow: hidden;
}
.img-wrapper image {
    width: 100px;
}

I want to use mixin in scss like this

@mixin fixed-img($width, $height) {
    width: $width;
    height: $height;
    overflow: hidden;

    ...
}

.img-wrapper {
    @include fixed-img(100px , 100px);
}

Can I get the the above css output by using only one mixin

Upvotes: 0

Views: 1209

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123387

use the parent selector & inside the mixin and define the rule for the nested img element

@mixin fixed-img($width, $height) {
    width: $width;
    height: $height;
    overflow: hidden;

    & img {
       width: $width;
    }
}

.img-wrapper {
    @include fixed-img(100px , 100px);
}

Note that instead of

& img {
    width: $width;
}

You may avoid to use the SASS variable and use inherit keyword (or also 100%)

 & img {
    width: inherit;
 }

Upvotes: 3

Related Questions