【问题标题】:Remove a box shadow (SASS + Compass)移除盒子阴影(SASS + Compass)
【发布时间】:2014-07-03 20:20:16
【问题描述】:

我正在使用媒体查询删除框阴影 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。

【问题讨论】:

    标签: css sass compass-sass


    【解决方案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);
        }
    }
    

    【讨论】:

      【解决方案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));
      }
      

      【讨论】:

      • 这是最优雅的方式吗?我想可能有@include box-shadow(none); 之类的。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-07-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-06-10
      相关资源
      最近更新 更多