CSS calc() - Multiplication and Division with unit-ed values

前端 未结 2 441
野性不改
野性不改 2020-12-09 15:12

Is it possible to use calc() to multiply or divide with unit-based values (like 100%, 5px, etc).

For example I was hoping to do something like this:

         


        
2条回答
  •  温柔的废话
    2020-12-09 15:38

    For someone who is making a mistake like me, don't forget that you can't use sass variables in css calc function directly, for that you have to use sass calculation method

    $test: 10px;
    
    .testing{
        width: #{$test * 2};
    }
    

    or if still calc implementation is necessary

    $test: 10px;
    
    .testing{
      width: calc(50% + #{$test * 2});  // results in calc(50% - 20px)
    }
    

提交回复
热议问题