SASS Calc插值

时间:2017-02-15 11:39:46

标签: css sass bourbon

我有一个SASS变量:

$default-padding: 15px

我想使用它来使用calc函数设置CSS width属性。

我根据$ default-padding变量的值进行各种计算。例如,宽度为100% - (2 * $ default-padding)。因为左侧和右侧有填充。

我正在尝试设置一个局部变量(使用Bourbon的strip-unit方法):

$default-padding-left-and-right: #{(strip-unit($default-padding) * 2)}px;

在这个用例中我希望这个变量的结果是30px,我想在以下规则中使用它:

.popup {
    width: calc(100% - #{$default-padding-left-and-right});
}

这不起作用,生成的CSS是:

.popup {
    width: calc(100% - strip-unit(15px)px);
}

任何想法我做错了什么?

2 个答案:

答案 0 :(得分:2)

两件事:

  1. 似乎找不到条带单元功能(为什么功能 姓名打印出来)
  2. 你不应该插入$ default-padding-left-and-right(它将变量值转换为字符串) - 改为使用multiply。
  3. 示例:

    @function strip-unit($num) { @return $num / ($num * 0 + 1); }
    
    $default-padding: 15px;
    $default-padding-left-and-right: strip-unit($default-padding) * 2px;
    
    .popup {
      width: calc(100% - #{$default-padding-left-and-right});
    } 
    

    输出:

    .popup {
      width: calc(100% - 30px);
    }
    

答案 1 :(得分:0)

波本语功能为strip-units而非strip-unit - 更改此功能可解决您的问题