Vue3 使用 Sass/Scss
Siona
Vue3 使用 Sass/Scss
1. 安装依赖
yarn add sass sass-loader -D
2. 使用
<style scoped lang="scss">
.shift-css {
padding: 3px 7px;
color: #fff;
border-radius: 5px;
}
.head-container {
margin-top: 1vh;
display: flex;
.shift-time {
flex: 1;
padding-right: 2vw;
text-align: right;
display: flex;
justify-content: right;
align-items: center;
div {
margin-right: 0.5vw;
display: inline-block;
span {
font-size: 14px;
}
}
.shift {
/* & 用法：此处表示 .shift-morning */
&-morning {
/* 使用 @extend 引用 .shift-css */
@extend .shift-css;
background: #409eff;
}
&-afternoon {
@extend .shift-css;
background: rgb(230, 162, 60);
}
&-evening {
@extend .shift-css;
background: #67c23a;
}
}
}
}
tbody td span {
padding: 0.02vh 0.3vw;
font-size: 0.9em;
/* 动态 css 样式，html 中使用 <span :style="{'--span-bg-color': item.color}">{{ item.name }}</span> */
background-color: var(--span-bg-color);
border-color: var(--span-bg-color);
color: #ffffff;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: middle;
height: 24px;
line-height: 1;
border-width: 1px;
border-style: solid;
border-radius: 4px;
box-sizing: border-box;
white-space: nowrap;
--el-icon-size: 14px;
}
tbody td div span:not(:first-child) {
margin-top: 0.4vh !important;
}
</style>
注意
# 尽量使用 :deep(<inner-selector>) 代替 ::v-deep <inner-selector>
[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead of ::v-deep <inner-selector>.
ERROR
Syntax Error: expected selector.
# scss 文件中使用深度选择器 /deep/ 报错 Expected selector.
解决方案
将 /deep/ 改为 :deep()，可能原因是 scss 文件不支持 /deep/。
