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

我尝试将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\u width:1160px返回未定义变量的错误。你知道我遗漏了什么吗？
这根本不可能。由于触发器
@媒体屏幕和（最大宽度：1170px）
发生在客户端

只有当SASS获取包含
$base\u width
变量的样式表中的所有规则和属性并相应地复制/更改它们时，才能实现预期结果

由于它不会自动工作，您可以像这样手动操作：

@media screen and (max-width: 1170px)
      $base_width: 960px // you need to indent it to (re)set it just within this media-query
      // now you copy all the css rules/properties that contain or are relative to $base_width e.g.
      #wrapper
          width: $base_width
          ...

@media screen and (min-width: 1171px)
    $base_width: 1160px
      #wrapper
          width: $base_width
          ...

这不是真的干，但你能做的最好

如果每次更改都是相同的，那么还可以准备一个包含所有更改值的mixin，这样就不需要重复。此外，您可以尝试将mixin与特定更改结合起来。比如：

@media screen and (min-width: 1171px)
    +base_width_changes(1160px)
    #width-1171-specific-element // additional specific changes, that aren't in the mixin
        display: block

混合物看起来是这样的

=base_width_changes($base_width)
    #wrapper
        width: $base_width

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

作为一种干式解决方案，您可以在媒体查询中使用
@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";
}

您可以使用介质查询中定义的变量定义文件中包含的所有响应元素。因此，您只需重复导入语句。
与Philipp Zedler的回答类似，您可以通过mixin来完成。如果需要，可以将所有内容都放在一个文件中

@mixin样式（$base-width）{
//你的SCS在这里，例如。
#内容{
宽度：$基础宽度；
}
}
@媒体屏幕和屏幕（最大宽度：1170px）{
@包括样式（$base width:960px）；
}
@媒体屏幕和屏幕（最小宽度：1171px）{
@包括样式（$base width:1160px）；
}
我也有同样的问题

$menu width
变量在移动视图
@仅媒体屏幕上应为240px，在桌面视图上应为（最大宽度：768px）
和340px

因此，我只创建了两个变量：

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

下面是我如何使用它的：

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

这在SASS中是不可能的，但在CSS变量（或）中是可能的。唯一的缺点是浏览器支持——但实际上有一个POSTSS插件——它“扁平化”了CSS变量的使用（这也给了您对旧浏览器的支持）

下面的示例非常适用于SASS（使用POSTSSS css变量，您也可以获得对旧浏览器的支持）

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

.my元素{
字体大小：14px；
填充：0计算（1rem/2）；
}
@介质（最小宽度：1680px）{
.我的元素{
填充：0 calc（1.75rem/2）；
}
}
@介质（最小宽度：1440px）和（最大宽度：1679px）{
.我的元素{
填充：0 calc（1.5 rem/2）；
}
}
@介质（最小宽度：1680px）{
.我的元素{
字号：18px；
}
}
@介质（最小宽度：1440px）和（最大宽度：1679px）{
.我的元素{
字体大小：16px；
}
}
有了@ronen's和地图，就有了真正的力量：

@mixin样式（$map）{
myDiv先生{
背景：map get（$map，'foo'）；
字体大小：map get（$map，'bar'）；
}
}
@介质（最小高度：500px）{
@包括样式((
傅：绿色，
酒吧：50像素
));
}
@介质（最小高度：1000px）{
@包括样式((
福：红色，
条形图：100px
));
}

现在可以有更多针对
.myDiv
的干媒体查询，这些查询具有一系列不同的值


地图文档：

地图使用示例：
两条建议
1
将你的“默认”CSS语句写在小屏幕上，并且只在大屏幕上使用媒体查询。通常不需要
max width
媒体查询

示例（假设元素具有类“container”）

@mixin最小宽度（$width）{
@媒体屏幕和（最大宽度：$width）{
@内容；
}
}
.集装箱{
宽度：960px；
@包括最小宽度（1170px）{
宽度：1160px；
}
}

2如果需要，使用CSS变量解决问题

@mixin最小宽度（$width）{
@媒体屏幕和（最大宽度：$width）{
@内容；
}
}
：根{
--容器宽度：960px；
@包括最小宽度（1170px）{
--容器宽度：1160px；
}
}
.集装箱{
宽度：var（--容器宽度）；
}

注意：

由于当窗口的宽度为1170px时，它的宽度为1160px，因此最好使用100%的宽度和1160px的最大宽度，并且父元素可能具有5px的水平填充，只要“框大小”属性设置为“边框框”。有很多方法可以解决这个问题。如果父容器不是flex或网格容器，您可以使用
.container{margin:auto}
是否仍然存在SASS不能在@media querys中使用$variables的情况？@HappyTorso始终是这样，直到有一个客户端SASS编译器（例如JavaScript）在Windows上运行。Sass变量在构建时编译为静态值；它们在运行时不再存在。当媒体属性为
$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);
}