Question

我有一个mixin将用户选择的项目拆分为内联块网格。用户可以指定连续多少，装订线和要定位的子元素。

这一切都很好，下面是一个例子：

原创 - SCSS

@mixin list-grid($per-row, $spacing, $selector){
    margin: 0 em(-$spacing/2);
    @include clearfix;
    //negate the display-inline biatch
    letter-spacing: -0.31em;

    > #{$selector} {
        width: 100% / $per-row;
        font-size: 16px;
        position: relative;
        padding: 0 em($spacing/2) em($spacing) em($spacing/2);
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0;
        background-clip: content-box;
    }
}

我的问题是..当我尝试使用保证金时，我需要重新计算之前的计算，因为在计算宽度时不考虑填充，而现在有保证金我需要调整宽度以考虑所选的保证金。

我不确定如何最好地接近这一点。任何帮助赞赏。

新尝试 - SCSS

@mixin list-grid($per-row, $spacing, $selector){
    margin: 0 em(-$spacing/2);
    @include clearfix;
    //negate the display-inline biatch
    letter-spacing: -0.31em;

    > #{$selector} {
        /* not sure what to do here */
        width: 100% / $per-row -$spacing;
        font-size: 16px;
        position: relative;
        margin: 0 em($spacing/2) em($spacing) em($spacing/2);
        display: inline-block;
        vertical-align: top;
        letter-spacing: 0;
        background-clip: content-box;
    }
}

如果我做了3排，有25个排水沟，最新的尝试最终会有8％的宽度。我的数学必须要离开。

Working example

多个SCSS方程计算宽度减去边距

0 个答案: