使用Compass/sass進行百分比寬度響應佈局？

Question

我正在嘗試使用Sass（和Compass）來簡化百分比寬度佈局的創建。

從列表中使用公式除此之外的target/context=result，這裏的背景是980px和設計寬度爲640像素，我試圖做的

#leftcol { 
width: ((640/980)*100%); 
} 

一個規則，編譯爲

#leftcol { 
    width: 65.306%; 
} 

是有沒有一種更簡單的方法，而不是一遍又一遍地輸入？

Answer 1

沒有混入需要。 Sass有一個內置的百分比函數，可以接受各種單位。

width: percentage(640/980) 
width: percentage(640px/980px) 

既導致：

width: 65.30612% 

Answer 2

我想通了，我做了一個mixin：

@mixin flex($target, $context){ 
width: (($target/$context)*100%); 
} 

，然後用它

#leftcol { 
@include flex(640, 980); 
} 

Answer 3

SASS也允許函數定義（因此可以使用例如瓦特/最小寬度以及寬度，或作爲其他的子表達式的一部分）：

@function flex-width($target, $context) { 
    @return (($target/$context)*100%); 
} 

#leftcol { 
    width: flex-width(640, 980); 
}