SASS / Compass - Overwrite | Delete | Unset Mixins / Include

Question

I'm trying to set up a mobile-first workflow with SASS and Compass.

Therefore I want to define for the navigation an ul>li horizontal-inline-list via http://compass-style.org/reference/compass/typography/lists/horizontal_list/

I included:

nav.mainnav ul {
        @include horizontal-list(1rem);
}

Everything is working fine so far. But how can I get rid of this include when I'm targeting my breakpoint for larger screens?

@include breakpoint($large){
    nav.mainnav  ul {
        // I want to delete the include here
    }
}

Is there a simple way to do this or do I have to override the styles manually?

Related: http://stackoverflow.com/questions/12505378/is-there-any-way-to-unextend-a-class-in-sass — cimmanon, Oct 31 '14 at 16:25

score 0 · Accepted Answer · answered Oct 31 '14 at 16:24

0

In this instance, mobile first is not your best option.

@media (max-width: 20em) { // whatever your desired breakpoint is
    nav.mainnav ul {
        @include horizontal-list(1rem);
    }
}

Now you don't need to override the styles.

answered Oct 31 '14 at 16:24

cimmanon

1 Answers1