0

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

$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 宽）。

任何想法 ？还是我以错误的方式解决问题？

4

3 回答 3

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 是相对于字体大小的，所以您要做的就是使用该值来改变箭头在不同响应状态下的大小。

于 2013-09-03T14:37:40.793 回答
2

我会使用mixin：

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

然后你可以像这样在你的媒体查询中使用它（结合一个变量）：

$arrowSize: 30px;

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

div.selector {
  @include arrow($arrowSize);
}
于 2013-09-03T13:44:43.730 回答
1

我认为您不了解 SASS / Compass 和媒体查询的工作原理。变量在发送到客户端之前由编译器转换，而不是由浏览器的 CSS 引擎以及传统选择器（id、类、标签）解释的媒体查询

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

这是发生的事情的简化版本：

  • 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？哦，是的15px，我改变它。”

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

屏幕.css 

@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;
}

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

$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;
  }
}

或使用 mixin ：

在这种特定情况下有点没用

@mixin responsive-border($max-screen-width, $border-width){
  @media only screen and (max-width: #{$max-screen-width}) {
    border-width: $border-width;
  }
}

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: 30px;

  @include responsive-border(449px,15px);
}
于 2014-02-10T14:38:56.003 回答