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

嗨，我有重复的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，想知道是否有办法将它们捆绑在一起以保持干燥（不要重复自己）

不幸的是，没有。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;
    }
}

您可以使用mixin：

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

---

但是，它不会被渲染为干的…

如果通过以HTML元素为目标来指定属性，则不需要在媒体查询中再次指定它，除非您在CSS的其他位置专门重写了该属性。另外，别忘了你的括号{}问题是，移动视图不适用于桌面，所以媒体查询将在这个时候启动。哈哈，我正在使用不需要括号的sass:）我的意思是，如果

.mobile view

类仅在媒体查询处于活动状态时才适用，为什么要在两个位置指定相同的值？您不能将属性应用于媒体查询。媒体查询（既不是

@media

at规则）也不是样式规则。您希望在何处应用这些样式？也许如果您在示例CSS输出中表达它，而不是您在Sass中尝试过的，它可能会更清晰。一个用于移动设备，一个用于桌面，只需让桌面视图响应，这样当媒体查询条件出现时，它将应用与移动视图相同的css。我知道Sass有一种方法可以将css应用于多个属性。例如，

.mobile view、.desktop view{font size:1.5em；font-weight:normal}

将css应用于这两个属性。但是，当我对@media查询使用相同的策略时，它不起作用：（如果您尝试dddddd…

@media屏幕和（最大宽度：729px）{.desktop view、.mobile view{font-weight:normal；font-size:1.5em；}}

^这不会捕获很多移动设备案例，比如iPad，甚至是retina display iPad mini或其他。它们不会点击媒体查询，也不会获取移动视图css，因为（举个例子）iPad的最大宽度大于729px，如果你想专门为iPad设置，你可以根据像素比例来设置。也就是说，如果你添加了

viewport

meta标记，它仍然可以工作。hmmm但是使用viewport，新的视网膜iPad将默认为1024x768分辨率？我当然可以将媒体查询更改为look specificCaly用于iPad，但这有点遗憾，因为我已经可以根据

.mobile view

属性来判断。编辑：我承认我对viewport meta标记没有太多经验。我会查看它，看看是否可以在这里使用它。无论如何，不可能使输出变干，CSS不允许。