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

来源:1-4 @for循环 (下)

流火流年

2016-12-08 21:59

css效果是:

 width: calc(25% - 16px);


写回答 关注

3回答

  • 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);


    流火流年

    已解决,看我回答

    2016-12-17 22:11:51

    共 1 条回复 >

Sass进阶篇

对Sass其它较有难度的部分进行讲解,包括常用控制命令、函数

46631 学习 · 97 问题

查看课程

相似问题