在SCSS中，如何引用外部范围/块的值？

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