我是这个元素的开发人员之一,我们的 SASS 是由设计师交付的。我只了解 SASS 的基础知识,所以我不确定这是否可行。
我有一个类,我想生成多次,类名应该根据混入而改变。
这些是混入:
@mixin small-tablet
{
@media only screen and (max-width:767px)
{
@content;
}
}
@mixin mobile
{
@media only screen and (max-width:480px)
{
@content;
}
}
这是我要添加的部分(伪代码):
@include small-tablet, mobile
{
table.responsive-@mixin-name
{
display: block;
}
}
输出应该是这样的:
@media only screen and (max-width:767px)
{
table.responsive-small-tablet
{
display: block;
}
}
@media only screen and (max-width:480px)
{
table.responsive-mobile
{
display: block;
}
}
我怎样才能得到这个结果?
最佳答案
你可以这样试试
$mobile: 480;
$smalltablet: 767;
@mixin mq($width) {
@media only screen and (max-width:#{$width}px) {
@content;
}
}
@mixin generateMediaqueries {
@include mq($mobile) {
&-mobile {
@content;
}
}
@include mq($smalltablet) {
&-small-tablet {
@content;
}
}
}
table.responsive {
@include generateMediaqueries {
display: block;
}
}
结果输出:
@media only screen and (max-width: 480px) {
table.responsive-mobile {
display: block;
}
}
@media only screen and (max-width: 767px) {
table.responsive-small-tablet {
display: block;
}
}
关于css - 如何为 mixin 列表多次生成一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23060689/