scss动态变量

来源：4-3 创建基于 Layout 的基础架构-2

leecson

2022-01-23

老师，有两个问题请教一下
问题1：

<sidebar
      class="sidebar-container"
      :style="{ backgroundColor: variables.menuBg }"
    ></sidebar>

这里的行内样式变量，可以在sidebar.scss 里定义的sidebar-container里书写吗，类似下面这样
图片描述

问题二：

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
}

这里的样式变量为啥需要用 #{} 包裹，下面的样式不需要呢
图片描述

写回答

1回答

Sunday

2022-01-23

你好

问题一：

//img.mukewang.com/szimg/61ed045c094ff83516041640.jpg 这两个最终指向的就是同一个变量，但是不能再 scss 中通通过 variables.menuBg 的形式使用，因为不符合语法

问题二：

width: calc(100% - $sideBarWidth);

和

width: calc(100% - #{$sideBarWidth});

其实效果是一样的。。

基于Vue3新标准，打造后台综合解决方案

基于Vue3重写Vue-element-admin,打造后台前端综合解决方案

1940 学习 · 1687 问题

相似问题

回答 1

回答 1

回答 1

回答 3

回答 1