CSS SASS calc() 计算表达式或使用变量

zhaocarbon2023-09-20 9:36

calc（）是css的一个函数，可用于元素计算长度，比如div宽度想要减去一个固定宽度后并自适应，可以写为calc(100% - 60px) 注意"-"两边有空格

sass已经是常用的预编译语言，允许使用变量等规则，如果上边写到60px是一个变量，这个表达怎么写呢

$base-sidebar-width = "60px"

css 复制代码

.main-container {
    width: calc(100% - $base-sidebar-width);
    height: calc(100% - 60px);
    transition: margin-left .28s;
    margin-left: $base-sidebar-width;
    position: fixed;
    margin-top: 60px;
  }

显然这样写是不行的，浏览器解析完是这样子的

在scss里改为这样就行了：#{$base-sidebar-width}

css 复制代码

 .main-container {
    width: calc(100% - #{$base-sidebar-width});
    height: calc(100% - 60px);
    transition: margin-left .28s;
    margin-left: $base-sidebar-width;
    position: fixed;
    margin-top: 60px;
  }