问答详情
源自:1-4 @for循环 (下)

如何通过sass for循环结合css calc()方法得到包含百分比和px相减的width属性值?

css效果是:

 width: calc(25% - 16px);


提问者:流火流年 2016-12-08 21:59

个回答

  • rookie_r
    2017-04-29 17:17:34

    $side:20px !default;
    $ele:span;
    @for $i from 1 through 4{
     .#{$ele}-#{$i}{
       width:calc(100% - #{$side} * #{$i});
     }
    }

  • 流火流年
    2016-12-17 22:13:10

    @for $i from 1 through 4{
            $width:25%*$i;
            $margin:16px;
            .gd-cell--#{$i}-col,
            .gd-cell--#{$i}-col-phone.gd-cell--#{$i}-col-phone{
                width: calc(#{$width} - #{$margin});
        }
        }


  • Lubywu
    2016-12-17 16:30:26

    你这个需要减不同的像素大小吗?

    width: calc(25% - 16px/32px/48px);