用FontAwesome和Slim-Lang改进SASS复选框

Question

我正在用字体图标更改浏览器的标准复选框。这是可行的，但我只是简单地为悬停状态输入了两次东西。如果不输入相同的代码两次，我如何才能做到这一点？

SASS

.input-checkbox-alt
  opacity: 0
  position: absolute
  z-index: 5
  + label
    cursor: pointer
    display: inline
    margin-left: 23px
    &:before
      color: $silver
      content: "\f0c8"
      cursor: pointer
      font: 20px FontAwesome
      margin-left: -23px
      padding-right: 4px
      vertical-align: middle
    &:hover
      &:before
        color: $silver
        content: "\f14a"
        cursor: pointer
        font: 20px FontAwesome
        margin-left: -23px
        padding-right: 4px
        vertical-align: middle

  &:checked + label
    color: #444
    &:before
      color: $nephritis
      content: "\f14a"

SLIM

p
  input#banana-checkbox.input-checkbox-alt name="banana-checkbox" type="checkbox" 
    label for="banana-checkbox"  I am a banana

正如你所看到的&：悬停基本上是sae作为&：以前，唯一的区别是“内容”。那么，我如何删除这些重复的代码呢？

Answer 1

您可以使用带参数的SASS混合蛋白。

您的代码如下所示：

@mixin input-before($content)
  color: $silver
  content: $content;
  cursor: pointer
  font: 20px FontAwesome
  margin-left: -23px
  padding-right: 4px
  vertical-align: middle

.input-checkbox-alt
  opacity: 0
  position: absolute
  z-index: 5
  + label
    cursor: pointer
    display: inline
    margin-left: 23px
    &:before
      @include input-before("\f0c8"

    &:hover
      &:before
        @include input-before("\f14a")

  &:checked + label
    color: #444
    &:before
      color: $nephritis
      content: "\f14a"