Sass - 可能的分数计算?

时间:2016-02-06 15:22:31

标签: css sass

情况

我正在使用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无法处理分数?不确定,这里发生了什么?

代码

这是一支可以玩的笔: http://codepen.io/anon/pen/NxOyXq?editors=1100

0 个答案:

没有答案