解决 scss 中 calc 失效的问题

最新推荐文章于 2023-11-29 14:54:45 发布

来杯卡布奇洛

最新推荐文章于 2023-11-29 14:54:45 发布

阅读量1.7k

点赞数 1

本文链接：https://blog.csdn.net/lan123456_/article/details/128904029

版权

Vue 同时被 3 个专栏收录

26 篇文章 2 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

一、问题

在 scss 中使用 calc 计算变量的时候，没有产生任何效果，在开发这工具中可以看到并没有解析这段代码。

$topHeight: 6.41rem;
$leftWidth: 20.67rem;

.home {
  width: 100%;
  height: 100%;
  position: relative;

  &-top {
  	position: absolute;
    top: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: $topHeight;
  }
  &-left {
    position: absolute;
    top: $topHeight;
    left: 0;
    z-index: 1;
    width: $leftWidth;
    height: calc(100% - $topHeight);
  }
}

在这里插入图片描述

二、解决方法

在 calc 中通过 #{变量}这种方式使用即可。

$topHeight: 6.41rem;
$leftWidth: 20.67rem;

.home {
  width: 100%;
  height: 100%;
  position: relative;

  &-top {
  	position: absolute;
    top: 0;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: $topHeight;
  }
  &-left {
    position: absolute;
    top: $topHeight;
    left: 0;
    z-index: 1;
    width: $leftWidth;
    height: calc(100% - #{$topHeight});
  }
}