Question

我正在尝试做这样的事情：

$arrow-size: 30px;

@media only screen and (max-width: 449px) {
  $arrow-size: 15px;
}

div.selector {
  height: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: $arrow-size solid white;
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

不幸的是，$ arrow-size不会根据媒体查询而改变（我的箭头总是15px，即使我的窗口宽度超过449px）。

有什么想法吗？或者我是以错误的方式解决问题的？

Answer 1

我会使用mixin：

@mixin arrow($size) {
  border: $size;
}

然后，您可以在此类媒体查询中使用它（与variable结合使用）：

$arrowSize: 30px;

@media only screen and (max-width: 449px) {
  div.selector {
    @include arrow($arrowSize / 2);
  }
}

div.selector {
  @include arrow($arrowSize);
}

Answer 2

作为替代方案，请尝试使用em的强大功能：

$arrow-size: 1.875em; // 30px, use pxtoem.com for conversion

div.selector {
  height: 0px; width: 0px;
  position: absolute;
  bottom: 0px; left: 50%;
  border-bottom: $arrow-size solid white;
  border-left: $arrow-size solid transparent;
  border-right: $arrow-size solid transparent;
}

@media only screen and (max-width: 449px) {
  div.selector { font-size: 50%; }
}

由于em是相对于font-size的，所以你要做的就是使用该值来改变不同响应状态下箭头的大小。

Answer 3

我认为你不明白SASS / Compass和媒体查询是如何工作的。变量在被发送到客户端之前由编译器进行转换，而不是由浏览器的CSS引擎以及传统选择器（id，class，tag）解释的媒体查询

编译器不会将媒体查询解释为条件，因为在编译时，屏幕大小没有定义，特别是因为它不是他的工作。

以下是发生的事情的简化版本：

1 $arrow-size: 30px;“好的，我将新变量arrow-size设置为30px”
3 @media only screen and (max-width: 449px) {“好的，一个新的选择器...... 语法是正确的，如果大括号被关闭，我会稍后看。“
4 $arrow-size: 15px;“好的，我将arrow-size变量设置为15px”
5 }“好的，大括号已关闭”
...
13 border-bottom: $arrow-size solid white;“新的css规则，语法确定...哦，我必须替换变量！$arrow-size多少钱？哦是的，{{ 1}}，我改变它。“

结果，编译的CSS文件将是：

<强> screen.css

15px

您还可以将媒体查询放入选择器：

@media only screen and (max-width: 449px) {
}

div.selector {
  height: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: 15px solid white;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

或使用mixin：

在这个具体案例中有点无用

$arrow-normal-size: 30px;
$arrow-small-size: 15px;

div.selector {
  height: 0px;
  width: 0px;
  position: absolute;
  bottom: 0px;
  left: 50%;
  border-bottom: solid white;
  border-left: solid transparent;
  border-right: solid transparent;
  border-width: $arrow-normal-size;

  @media only screen and (max-width: 449px) {
    border-width: $arrow-small-size;
  }
}

罗盘（scss）变量＆amp;媒体查询

3 个答案:

您还可以将媒体查询放入选择器：

或使用mixin：