Question

这是我的sass代码，我的问题是mainBox类的height属性不起作用，并且无法在浏览器中正确编译

//design ratio
$boxHeightDesign : 628px;
$boxWidthDesign : 492px;
$heightToWidthRatioDesign : calc(#{$boxHeightDesign}/#{$boxWidthDesign});
//box
$mainBoxWidth : 200px;
$mainBoxHeight : calc(#{$mainBoxWidth}*#{$heightToWidthRatioDesign});
.mainBox{
  width: $mainBoxWidth;
  height: $mainBoxHeight;
  background-image: url("../box.png");
}

编译css：

.mainBox {
  width: 200px;
  height: calc(200px*calc(628px/492px));
  background-image: url("../box.png");
}

Answer 1

由于您使用的是相同的单位（px），因此您可以使用SASS计算。通过擦除单位使用数字。不要使用calc，而只是使用($x [+-*/] $y)。

    $boxHeightDesign : 628;
    $boxWidthDesign : 492;
    $heightToWidthRatioDesign: ($boxHeightDesign/$boxWidthDesign);
    //box
    $mainBoxWidth : 200;
    $mainBoxHeight: ($mainBoxWidth*$heightToWidthRatioDesign);

    .mainBox{
      width: #{$mainBoxWidth}px;
      height: #{$mainBoxHeight}px;
      background-image: url("../box.png");
    }

带有变量的嵌套计算

1 个答案: