在CSS3媒体查询中使用Sass变量

无礼的 CSS

斯丁A

2020-03-18

我试图结合使用Sass变量与@media查询，如下所示：

$base_width:1160px;

@media screen and (max-width: 1170px) {$base_width: 960px;}
@media screen and (min-width: 1171px) {$base_width: 1160px;}

$base_width 然后在基于样式表宽度百分比的度量中的各个点定义，以生成流畅的布局。

当我这样做时，似乎可以正确识别该变量，但不能进行媒体查询的条件。例如，上面的代码生成1160px的布局，而不考虑屏幕的宽度。如果我像这样翻转@media语句：

@media screen and (min-width: 1171px) {$base_width: 1160px;}
@media screen and (max-width: 1170px) {$base_width: 960px;}

无论屏幕宽度如何，它都会产生960px的布局。另请注意，如果删除第一行，$base_width: 1160px;则返回未定义变量的错误。有什么想法我想念的吗？

第2011篇《在CSS3媒体查询中使用Sass变量》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

西里西门 2020.03.18

我有同样的问题。

该$menu-width变量在移动设备视图上应为240px @media only screen and (max-width : 768px)，在桌面视图上应为340px 。

所以我只创建了两个变量：

$menu-width: 340px;
$menu-mobile-width: 240px;

这是我如何使用它：

.menu {
    width: $menu-width;
    @media only screen and (max-width : 768px) {
      width: $menu-mobile-width;
    }
}

Jim逆天 2020.03.18

编辑：请不要使用此解决方案。ronen的答案要好得多。

作为DRY解决方案，您可以@import在媒体查询中使用该语句，例如：

@media screen and (max-width: 1170px) {
    $base_width: 960px;
    @import "responsive_elements";
}
@media screen and (min-width: 1171px) {
    $base_width: 1160px;
    @import "responsive_elements";
}

您可以使用媒体查询中定义的变量在文件中定义所有响应元素。因此，您需要重复的只是import语句。

Sam卡卡西 2020.03.18

与Philipp Zedler的答案类似，您可以使用mixin来完成。这样一来，您便可以将所有内容保存在一个文件中。

    @mixin styling($base-width) {
        // your SCSS here, e.g.
        #Contents {
            width: $base-width;
        }
    }

    @media screen and (max-width: 1170px) {
        @include styling($base-width: 960px);
    }
    @media screen and (min-width: 1171px) {
        @include styling($base-width: 1160px);
    }

A蛋蛋 2020.03.18

对于SASS，这是不可能的，但是对于CSS变量（或CSS自定义属性），这是可能的。唯一的缺点是对浏览器的支持-但是实际上有一个PostCSS插件-postcss-css-variables-可以“ 简化 ” CSS变量的使用（它也支持较旧的浏览器）。

以下示例非常适合SASS（与postcss-css-variables一起使用时，您也支持较旧的浏览器）。

$mq-laptop: 1440px;
$mq-desktop: 1680px;

:root {
    --font-size-regular: 14px;
    --gutter: 1rem;
}

// The fact that we have to use a `max-width` media query here, so as to not
// overlap with the next media query, is a quirk of postcss-css-variables
@media (min-width: $mq-laptop) and (max-width: $mq-desktop - 1px) {
    :root {
        --font-size-regular: 16px;
        --gutter: 1.5rem;
    }
}

@media (min-width: $mq-desktop) {
    :root {
        --font-size-regular: 18px;
        --gutter: 1.75rem;
    }
}

.my-element {
    font-size: var(--font-size-regular);
    padding: 0 calc(var(--gutter) / 2);
}

这将导致以下CSS。重复的媒体查询将增加文件的大小，但是我发现，一旦应用Web服务器gzip（通常会自动执行），则增加通常可以忽略不计。

.my-element {
  font-size: 14px;
  padding: 0 calc(1rem / 2);
}
@media (min-width: 1680px) {
  .my-element {
  padding: 0 calc(1.75rem / 2);
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  padding: 0 calc(1.5rem / 2);
  }
}
@media (min-width: 1680px) {
  .my-element {
  font-size: 18px;
  }
}
@media (min-width: 1440px) and (max-width: 1679px) {
  .my-element {
  font-size: 16px;
  }
}