2014-01-28 74 views
1

我嘗試在for循環內創建一個柔性表格網格 它的工作完全適用於基於PX的工作,但無法獲得%添加它給了我一個錯誤。在for循環sass中添加%單位

$fg-column: 20px; 
$$fg-max-columns:41; 

width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i); 

.table-grid-layout{ 
    &.is-fluid{ 
     @include fill-parent; 
     @for $i from 1 through 41 { 
     .column-#{$i} { 
      width:(#{($fg-column /$fg-max-columns)}#{"%"}) * $i); 
     } 
     } 
    } 
    &.not-fluid{ 
     @include outer-container; 
     @for $i from 1 through 41 { 
     .column-#{$i} { 
      width: 20px * $i; 
     } 
     } 
    } 

} 

回答

-2

有沒有可能百分號實際上試圖返回等式的其餘部分?

退房來自此源的段落: http://learn.shayhowe.com/advanced-html-css/preprocessors

「乘法完成後用星號符號,*,但是隻有一個號碼,如果有的話,可以包括測量單位使用。百分號%將在分割時返回兩個數字的其餘部分,並且與乘法一樣,只允許一個數字(如果有的話)擁有一個單位。「

另外,是否可以利用Sass百分比函數?在堆棧上查看此前一個問題:Calculate a percent with SCSS/SASS

2

只需將一個百分比符號作爲字符串添加到像素值就不會達到您之後的結果。如果你想要得到的百分比值,你需要劃分 列數爲迭代設計上總列數:

.column-#{$i} { 
    width: percentage($i/$fg-max-columns); 
} 

另外,請微塵,這種做法是不是語義,因爲你結束了描述佈局本身的類,而不是內容。