将@debug或@function @返回值分配给SCSS中变量

fv2wmkja 于 2022-12-01 发布在其他

关注(0)|答案(1)|浏览(156)

有没有办法通过**@函数或@调试将值传递给$变量**我正在使用多个Calc方法，当它在mixins中组合时，calc（）内部的calc（）不起作用。* 例如 *

<div class="misc"></div>

@function cont-full() {
    @return calc(100vw - 32px);
}

$container-width: cont-full();
.misc {
    width: $container-width;
}

.misc {
    width: calc(100vw - 32px);
}

.misc {
    width: 1520px;
}

请引导谢谢。

1条答案

请尝试以下内容。
创建scss函数

@function -rc($s, $m) {
  $result: #{$s*$m}px;
  @return $result;
}

使用函数

#logo_widget {
  position: absolute;
  width: -rc(220, 3);
  height: -rc(90, 3);
  margin: -rc(20, 3) -rc(40, 3);
  top: 0;
  left: 0;
}

它在css以下生成

#logo_widget {
    position: absolute;
    width: 660px;
    height: 270px;
    margin: 60px 120px;
    top: 0;
    left: 0
}

希望这对你有帮助，祝你好运！