SCSS：calc() 中使用变量

在写style时，calc是经常用到的计算函数，当使用calc时，如果参数中有变量怎么用呢？

如下代码：

$sideWidth:180px;

.container {

  @if ($sideWidth==180px){

    width: calc(100% - $sideWidth); // ?? 计算中使用变量

  }@else {

    width: 100%;

  }

}

最后会发现再编译成css时，这个变量没有读取出来 ，如下图：

编译后样式

解决办法：

    平常用calc函数时，是这样写的：width: calc(100% - 180px);所以当180px是变量时需要用插值表达式包裹起来，，编译就会正常。如下图所示

这样就完美解决啦~~~

还有除法运算符' / '， 如果需要使用变量，同时又要确保 / 不做除法运算而是完整地编译到 CSS 文件中，只需要用 #{} 插值语句将变量包裹。

p {

  $font-size: 12px;

  $line-height: 30px;

  font: #{$font-size}/#{$line-height};

}

编译为

p {

  font: 12px/30px; }