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