Scss mixins 可以响应吗

Posted 2023-03-06

【中文标题】Scss mixins 可以响应吗

【英文标题】：Can Scss mixins be responsive

【发布时间】：2013-04-28 08:26:22

【问题描述】：

在我的 css 中，我为不同的设备设置了不同的字体样式*：

例如

@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，这样我就可以在其他样式中调用这些值，同时仍然保持它们的响应性。

例如

SCSS：

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

输出的 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，但它似乎不起作用。

*我只是以字体样式为例。

【参考方案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;
  

理想情况下，您应该避免经常调用这种 mixin，因为要生成大量额外代码。如果代码是您想要重复的内容，您可能需要考虑使用@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;