2014-01-28 153 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); 
} 

另外,请微尘,这种做法是不是语义,因为你结束了描述布局本身的类,而不是内容。