将CSS应用于属性和媒体查询

Question

您好我有重复的css代码，我想要应用于媒体查询以及html属性。

例如

@media only screen and (max-width 729px)
    font-size: 1.5em
    font-weight: normal
.mobile-view
    font-size: 1.5em
    font-weight: normal

我正在使用SASS并想知道是否可以将这些捆绑在一起以保持干燥（不要自己重复）

Answer 1

你可以使用mixin：

@mixin mobileFont() {
    font-size: 1.5em;
    font-weight: normal;
}
@media only screen and (max-width 729px){
    @include mobileFont();
}
.mobile-view{
    @include mobileFont();
}

然而，它并没有被渲染干......

Answer 2

不幸的是没有。 Sass期望嵌套项对应于父对象。因此，如果使用了方法，它将编译为类似：

.parent @media only screen and (max-width: 729px) .mobile-view { 
    font-size: 1.5em;
    font-weight: normal
}

如果要对多个元素进行分组，则可以执行此操作。

@media only screen and (max-width: 729px) {
    .item-one, 
    .item-two,
    .item-three .child {
        font-size: 1.5em;
        font-weight: normal;
    }
}