把这段less代码,转换成scss代码:.select-box { height: 420px; overflow-y: auto; li { padding: 5px 0; i { float: right; padding-left: 24px; padding-right: 10px; color: #3195f8; font-size: 12px; cursor: pointer; background: url(~@/assets/images/next_level_active.png) no-repeat 10px center; border-left: 1px solid rgb(238, 238, 238); } a.active+i { color: rgb(197, 197, 197); background-image: url(~@/assets/images/next_level.png); pointer-events: none; } img { width: 14px; vertical-align: middle; margin-right: 5px; } } }
时间: 2023-05-23 10:07:19 浏览: 331
.select-box {
height: 420px;
overflow-y: auto;
li {
padding: 5px 0;
i {
float: right;
padding-left: 24px;
padding-right: 10px;
color: red;
}
}
}
转换后的 SCSS 代码如上。
相关问题
vue style设置了scoped lang="scss"属性 .ant-form .ant-form-item .ant-select-selection { width: 150px; }无效
如果你在 Vue 中使用了 `lang="scss"` 属性来使用 SCSS 预处理器,那么你需要注意样式选择器的书写方式。
在 SCSS 中,使用 `&` 符号可以引用当前选择器的父级选择器,从而形成更加具体的选择器。因此,你可以尝试使用以下方式来书写样式:
```
<style scoped lang="scss">
.ant-form {
.ant-form-item {
.ant-select {
&.ant-select-selection {
width: 150px;
}
}
}
}
</style>
```
这段样式中,我们使用了 `&` 符号来引用父级选择器,从而得到更加具体的选择器,从而提高了样式的权重。
scss文件中 ::v-deep 报错
如果在 SCSS 文件中使用 `::v-deep` 报错,可能是因为你的项目使用了 Vue.js 2.x 版本,而 `::v-deep` 是 Vue.js 3.x 版本中的语法。
如果你想在 Vue.js 2.x 中使用 `::v-deep`,你可以使用 `>>>` 或 `/deep/` 代替。例如:
```scss
/* 使用 >>> */
.parent >>> .child {
color: red;
}
/* 使用 /deep/ */
.parent /deep/ .child {
color: red;
}
```
另外,如果你的报错信息是类似于 `Unknown pseudo-element or pseudo-class` 的错误,可能是因为你的编译器版本过旧,需要升级到支持 `::v-deep` 的版本。