我正在使用calc()和flexbox处理基于分数的网格系统。
我很难通过分数(例如“1/8”)进行计算。 这实际上是否可以与sass一起使用?
@mixin column($fraction: '1/1', $gutter: 20px) {
width: calc(100% * #{$fraction} - (#{$gutter} - #{$gutter} * #{$fraction}));
&:not(:nth-child(#{convert-fraction-to-full($fraction)}n) {
margin-right: $gutter;
}
}
<小时/>
@function convert-fraction-to-full($fraction){
@return #{$fraction} / #{$fraction} / #{$fraction};
}
.griditem {
@include column('1/8', 20px);
}
宽度计算有效,因为calc()正在处理这个问题。但是.griditem {
width: calc(100% * 1/8 - (20px - 20px * 1/8));
}
.griditem:not(:nth-child(8)) {
margin-right: 20px;
}
内部的计算不是因为sass无法处理分数?不确定,这里发生了什么?