Question

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

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

你可以看到＆amp;：hover基本上是sae as＆amp;：之前，唯一的区别就是“内容”。那我怎么能删除这个重复的代码？

Answer 1

您可以使用带有参数的SASS mixin。

您的代码如下所示：

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

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

1 个答案: