在 SCSS 中，如何引用外部 scope/block 中的值？

Question

以下是 SCSS 中的代码片段：

.element-a {
  position: absolute;
  right: 0;
  width: 216px;
  height: 232px;
  @media (max-width: 1000px) {
    right: 0;      // Half of 0
    width: 118px;  // Half of 216 px
    height: 116px; // Half of 232 px
  }
}

.element-b {
  position: absolute;
  width: 140px;
  height: 152px;
  right: 216px + 10px;
  @media (max-width: 1000px) {
    width: 70px; // Half of 140px
    height: 76px; // Half of 152px
    right: 113px; // Half of 226px
  }
}

可以看出，如果媒体查询max-width:1000px满足。属性 right、width 和 height 应该是其原始值的一半。但是，通过手动计算来硬编码该值看起来不是一个好的做法。

SASS/SCSS有没有更好的写法？或者有没有办法在外部范围内引用值？

Answer 1

使用variables，这里有一个例子：

$b-width: 140px;

.element-b {
    width: $b-width;
    @media (max-width: 1000px) {
        width: $b-width/2 // Half of $b-width
    }
}

在 SCSS 中，如何引用外部 scope/block 中的值？

In SCSS, how to refer the value in outer scope/block?

css

sass

media-queries

responsive-design