3

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

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

4

1 回答 1

4

您希望 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;
}
于 2013-05-03T20:59:27.560 回答