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

我正在用图标更改浏览器的标准复选框。 这是可行的，但我基本上要为悬停状态输入两次。我如何在不输入两次相同代码的情况下完成此操作

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

正如您所看到的&:hover基本上是sae的&:before，唯一的区别是“内容”。那么，如何删除重复的代码呢？

您可以使用带有参数的

您的代码如下所示：

@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"