Menu icon Foundation
Visibility SASS Mixin

I can't seem to find a visibility mixin for SASS. Is this right? Does anyone have one? I need to use SASS because I don't want to output the default Foundation class names for visibility (or any other component) as I need to keep everything namespaced.

On a separate note, I had to add some code to get the visibility component to work (when I reference components individually).

@import "global";
            

         

visibility classmixinSassscss

I can't seem to find a visibility mixin for SASS. Is this right? Does anyone have one? I need to use SASS because I don't want to output the default Foundation class names for visibility (or any other component) as I need to keep everything namespaced.

On a separate note, I had to add some code to get the visibility component to work (when I reference components individually).

@import "global";
            

         
Gerhard over 5 years ago

I'm also looking for those visibility mixins. No documentation to be found.

We could do that manually with @media mixins. But it would be nice to have visibility mixins available.

RJ Lewis over 5 years ago

it works the same as f4:

.your-class {
 @extend .hide-for-***SIZE**;
}
.your-other-class {
  @extend .show-for-****SIZE***;
}

Toby Stokes over 4 years ago

@extend does give a significantly different compiled result to a mixin, and can get especially messy when dealing with media queries as well.

I can see why a mixin to achieve the same (but probably compiled to more relevant point in the css) would be useful.

But I have examined the _visibilty.scss in F5 and don't think it exists yet. Might write one...