Unexpected compilation with SASS media queries within a mixin

Question

I'm currently working on some front-end code for a Vaadin project. I'm trying to get some responsive styling up and running. Unfortunately Vaadin's build in responsive add-on does not have support for IE11.

So I want to use media queries to do the responsive design. I've got two SASS files: commontheme.scss is all the common styling and mymixin.scss contain all desktop specific styling.

So here is my code:

@import "../commontheme/commontheme.scss";  //the common them. The common theme

@mixin mymixin
{
    @include commontheme; //Including the stuff from the common 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 to the following CSS:

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

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

Whereas what I need is the following code, which works fine if I live edit out the offending lines at the start and end of the block in the compiled CSS.

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

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

I'm new to this entire development stack. So I'm assuming I'm doing something wrong somewhere, but I haven't had any luck fixing it. If anyone here can offer some insight or a direction to look into I would greatly appreciate it.

For reference, I am using Vaadin 7.2.3 which should include full SASS support.

Answer 1

You need just put @media tags out of mymixin like that:

$myVar: 100px;
@mixin mymixin
{
    @include commontheme; //Including the stuff from the common theme.
    .my-image
    {
        width: $myVar;
    }
}

$myVar: 50px;
@media (max-width:500px)
{
    .mymixin
    {
        .my-image
        {
            width: $myVar;
        }
    }
}

You will probably add @media mixins in separate .scss file and include it in main myTheme.scss, but the file structure concpet is not the part of this question.