在维护和开发项目时,为了提高效率,会有代码的重复利用。在Sass中,除了@import和@extend增加代码的重复利用性,当然@mixin指令也有同样的效果。
@extend指令通过继承从而简化了代码,但是不够灵活,还会将你不想要的别的地方的相同的类名全部都继承。
@mixin指令是另一种简化代码的方法。Mixins可以包含任意内容且可以传递参数,因此比’@extend’更加灵活和强大。
@mixin +类名 来进行使用
<style lang="scss" scoped>
@mixin overflow-hiding {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.el-select {
width: 100%;
.el-select__tags {
.el-tag {
position: relative;
padding-right: 20px;
@include overflow-hiding
}
/deep/ .el-tag__close {
position: absolute;
right: 0;
top: 5px
}
}
}
.el-select-dropdown {
/deep/ .el-select-dropdown__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 14px;
}
}
</style>
/deep/ 深度选择器
在 跟组件 和子组件 可能会有相同的 类名进行 css样式 ,但是这样会影响子组件的样式 在添加scoped之后 会在后面加上一个hash值。
但这样存在另个问题,比如你使用了别人的组件或者自己开发一个组件,有时候你修改一处就可能影响到别的地方,这个时候要么你不用别人的组件,自己重新封装一个,但很多时候是不太现实的,所以就需要有一个方法或者方式,既不影响到别的地方,又能修改子组件在当前的样式。
.el-select-dropdown {
/deep/ .el-select-dropdown__empty {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-size: 14px;
}
}
当然了把 /deep/ 换成 >>>,也可以达到同样的效果。