css3 - Unexpected compilation with SASS media queries within a mixin -

css3 - Unexpected compilation with SASS media queries within a mixin -

i'm working on front-end code vaadin project. i'm trying responsive styling , running. unfortunately vaadin's build in responsive add-on does not have back upwards ie11.

so want utilize media queries responsive design. i've got 2 sass files: commontheme.scss mutual styling , mymixin.scss contain desktop specific styling.

so here code:

@import "../commontheme/commontheme.scss"; //the mutual them. mutual theme @mixin mymixin { @include commontheme; //including stuff mutual theme. $small-size: 100px; $med-size: 200px; @media (max-width:500px) { .my-image { width: $small-size; } } @media (min-width:501px) { .my-image { width: $med-size; } } }

this compiles next css:

.mymixin { @media (max-width:500px) { .my-image { width: 100px; } } @media (min-width:501px) { .my-image { width: 200px; } } }

whereas need next code, works fine if live edit out offending lines @ start , end of block in compiled css.

@media (max-width:500px) { .my-image { width: 100px; } } @media (min-width:501px) { .my-image { width: 200px; } }

i'm new entire development stack. i'm assuming i'm doing wrong somewhere, haven't had luck fixing it. if here can offer insight or direction appreciate it.

for reference, using vaadin 7.2.3 should include total sass support.

you need set @media tags out of mymixin that:

$myvar: 100px; @mixin mymixin { @include commontheme; //including stuff mutual theme. .my-image { width: $myvar; } } $myvar: 50px; @media (max-width:500px) { .mymixin { .my-image { width: $myvar; } } }

you add together @media mixins in separate .scss file , include in main mytheme.scss, file construction concpet not part of question.

css3 sass media-queries vaadin