Question

我希望得到像这样的css代码

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

我想在这样的scss中使用mixin

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

    ...
}

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

我是否可以通过仅使用一个mixin来获得上述css输出

Answer 1

使用mixin中的父选择器&并定义嵌套img元素的规则

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

    & img {
       width: $width;
    }
}

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

请注意，而不是

& img {
    width: $width;
}

您可以避免使用SASS变量并使用inherit关键字（或100%）

 & img {
    width: inherit;
 }

如何在scss mixin中使用多个选择器或嵌套选择器

1 个答案: