Question

我的问题非常简单，但我无法让它发挥作用。我知道您可以使用Bootstrap + Glyphicon创建一个按钮，如下所示：

<a href="#" class="btn btn-success"><span class="glyphicon glyphicon-chevron-left"></span> Default text here</a>

但是，我想要内容＆amp;样式分开（正常，对吗？），因为它使编辑更容易（只有一个scss文件，而不是带按钮的54个html文件）。

我可以在按钮之前使用:: before或:: after然后使用＆＃34; content＆＃34;在scss中加入Glyphicon？如果是这样，怎么样？

Answer 1

第一个想法可能是做这样的事情

@import "variables";
@import "glyphicons";

.my-btn{
   &:before{
     .glyphicon;
     .glyphicon-chevron-left;
   }
}

但是编译成类似的东西：

.my-btn:before {
   position: relative;
   top: 1px;
   display: inline-block;
   font-family: 'Glyphicons Halflings';
   font-style: normal;
   font-weight: normal;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
.my-btn:before:before { /*this is wrong*/
   content: "\e079";
}

嵌套的伪元素如果我没弄错的话，这是不可能的。Nesting pseudo-elements inside pseudo-elements

所以你必须这样做：

//HTML
<a href="#" class="btn btn-success my-btn my-chevron-left">Default text here</a>

//CSS
@import "variables";
@import "glyphicons";


.my-btn{
    &:before{
       .glyphicon;
    }

    &.my-chevron-left{
       .glyphicon-chevron-left;
    }
}

PD：我用得少，在SCSS中非常相似

Bootstrap Button Glyphicon

1 个答案: