Question

在我的CSS中，我有不同设备的不同字体样式*：

e.g。

@media only screen and (min-width: 480px) and (max-width: 599px) {
t-heading {
font-size:14px;
} 
}

@media only screen and (min-width: 600px) {
t-heading {
font-size:24px;
} 
}

我想把它们变成一个mixin，所以我可以在其他样式中调用这些值，同时仍然让它们保持响应。

E.g。

SCSS：

.front {
background: red;
@include t-heading; 
}

Outputed CSS：

   .front {
    background:red;
    }

    @media only screen and (min-width: 480px) and (max-width: 599px) {
    .front {
    font-size:14px;
    } 

    }
    @media only screen and (min-width: 600px) {

    .front {
    font-size:24px;
    } 
    }

这在SCSS中是否可行？我试过在媒体查询中包装mixins，但它似乎没有用。

*我只是使用字体样式作为示例。

Answer 1

您希望mixin包含媒体查询，而不是相反：

@mixin t-heading {
    @media only screen and (min-width: 480px) and (max-width: 599px) {
        font-size:14px;
    }

    @media only screen and (min-width: 600px) {
        font-size:24px;
    } 
}

.front {
    background: red;
    @include t-heading; 
}

输出：

.front {
  background: red;
}
@media only screen and (min-width: 480px) and (max-width: 599px) {
  .front {
    font-size: 14px;
  }
}
@media only screen and (min-width: 600px) {
  .front {
    font-size: 24px;
  }
}

理想情况下，您希望避免经常调用这种混合，因为这需要生成大量额外代码。如果代码是您想要重复的内容，您可能需要考虑使用@extend：

%t-heading {
    @media only screen and (min-width: 480px) and (max-width: 599px) {
        font-size:14px;
    }

    @media only screen and (min-width: 600px) {
        font-size:24px;
    } 
}

.front {
    background: red;
    @extend %t-heading; 
}

.back {
    @extend %t-heading;
}

输出：

@media only screen and (min-width: 480px) and (max-width: 599px) {
  .front, .back {
    font-size: 14px;
  }
}
@media only screen and (min-width: 600px) {
  .front, .back {
    font-size: 24px;
  }
}

.front {
  background: red;
}

Scss mixins能否做出响应

1 个答案: