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中编辑块的开头和结尾处的有问题的行，它可以正常工作。

@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并将其包含在主myTheme.scss中，但文件结构concpet不是此问题的一部分。

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

1 个答案: