如何在css类中覆盖@include？
如何在css类中覆盖@include？
提问于 2018-12-14 02:32:19
我的团队的应用程序正在使用bootstrap sass进行一些样式设置，但有一些特定的定制。引导程序文件是通过构建过程添加到我们的项目中的，所以我不能直接修改它们。
对于下拉切换元素，bootstrap添加了一个小的插入符号，我想删除它。但这是通过@include完成的(如下所示)。
.dropdown-toggle {
// Generate the caret automatically
@include caret;
}如何在本地sass文件中重写此代码，以删除/从不显示插入符号？
编辑:这是我最终使用的一个修复。不是完美的，但它是有效的。
.dropdown-toggle::after {
border: none !important;
}下面是插入符号的混合：
@mixin caret-down {
border-top: $caret-width solid;
border-right: $caret-width solid transparent;
border-bottom: 0;
border-left: $caret-width solid transparent;
}
@mixin caret-up {
border-top: 0;
border-right: $caret-width solid transparent;
border-bottom: $caret-width solid;
border-left: $caret-width solid transparent;
}
@mixin caret-right {
border-top: $caret-width solid transparent;
border-bottom: $caret-width solid transparent;
border-left: $caret-width solid;
}
@mixin caret-left {
border-top: $caret-width solid transparent;
border-right: $caret-width solid;
border-bottom: $caret-width solid transparent;
}
@mixin caret($direction: down) {
@if $enable-caret {
&::after {
display: inline-block;
width: 0;
height: 0;
margin-left: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@if $direction == down {
@include caret-down;
} @else if $direction == up {
@include caret-up;
} @else if $direction == right {
@include caret-right;
}
}
@if $direction == left {
&::after {
display: none;
}
&::before {
display: inline-block;
width: 0;
height: 0;
margin-right: $caret-width * .85;
vertical-align: $caret-width * .85;
content: "";
@include caret-left;
}
}
&:empty::after {
margin-left: 0;
}
}
}回答 1
Stack Overflow用户
发布于 2018-12-14 04:49:17
好的，您可以使用以下命令覆盖和删除插入符号：
.dropdown-toggle {
&:after, &:before {
display: none;
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53768115
复制相关文章
相似问题
腾讯云开发者
