移除盒子阴影（SASS + Compass）

Question

我正在使用媒体查询删除框阴影 CSS：

.myelements {
    @include box-shadow(2px 2px 3px #000);
}

@media (max-width: 768px) {
    .myelements {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
}

与其将 css 重新定义为 none 并不得不使用所有供应商前缀，我想知道是否有更优雅的方式？我正在使用 SASS 和 Compass。

Answer 1

正确的值为none：

.myelements {
    @include box-shadow(2px 2px 3px #000);
}

@media (max-width: 768px) {
    .myelements {
        @include box-shadow(none);
    }
}

但是，您应该尽可能避免重复设置/取消设置属性以获得更小的 CSS 文件：

.myelements {
    // nothing
}

@media (min-width: 768px) {
    .myelements {
        @include box-shadow(2px 2px 3px #000);
    }
}

Answer 2

让它透明：

.myelements {
    @include box-shadow(2px 2px 3px #000);
}

@media (max-width: 768px) {
    @include box-shadow(0 0 0 0 rgba(0,0,0,0));
}