Remove a box shadow (SASS + Compass)

Question

I am removing the box shadow CSS with my media query:

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

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

Instead of re-defining the css as none and having to use all the vendor prefixes I was wondering if there was more elegant sassier way? I am using SASS and Compass.

Answer 1

The correct value is none:

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

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

However, you should avoid repeatedly setting/unsetting properties whenever possible to get a smaller CSS file:

.myelements {
    // nothing
}

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

Answer 2

Make it transparent:

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

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