css - 在 mixin 中使用 SASS 媒体查询进行意外编译

Question

我目前正在为 Vaadin 元素编写一些前端代码。我正在尝试启动并运行一些响应式样式。不幸的是，Vaadin 内置了响应式附加组件 does not have support for IE11 .

所以想用媒体查询来做响应式设计。我有两个 SASS 文件:commontheme.scss 是所有通用样式，mymixin.scss 包含所有桌面特定样式。

这是我的代码:

@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;
        }
    }
}

这会编译成以下 CSS:

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

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

而我需要的是下面的代码，如果我在编译的 CSS 中实时编辑 block 开头和结尾的违规行，它就可以正常工作。

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

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

我是整个开发堆栈的新手。所以我假设我在某处做错了什么，但我没有运气修复它。如果这里有人可以提供一些见解或研究方向，我将不胜感激。

作为引用，我使用的是 Vaadin 7.2.3，它应该包括完整的 SASS 支持。

Answer 1

你只需要像这样把 @media 标签从 mymixin 中取出:

$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;
        }
    }
}

您可能会在单独的 .scss 文件中添加 @media mixins，并将其包含在 main myTheme.scss 中，但文件结构概念不是这个问题的一部分。