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

【问题标题】：Unexpected compilation with SASS media queries within a mixin在 mixin 中使用 SASS 媒体查询进行意外编译
【发布时间】：2014-10-21 04:16:51
【问题描述】：

我目前正在为 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 支持。

【问题讨论】：

您的 Sass 没有任何问题（请参阅：sassmeister.com/gist/fa94eb844ee63e2c3a7b）。将来，请确保您的代码可以按原样编译（未定义的 mixins、不可用的导入等）。
响应式插件实际上在 IE11 中像魅力一样工作。使用它，因为我认为普通的 CSS 媒体查询不是你想要的。使用 CSS 时，您不能声明断点，例如您的响应组件的父组件变得太小/太宽。

标签： css sass media-queries vaadin

【解决方案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 不是这个问题的一部分。

【讨论】：