CODEWITHSUNDEEP
sassslim-lang
Sharpless512
Sharpless512

Reputation: 3232

Improve SASS checkbox with FontAwesome and Slim-Lang

I'm changing the standard checkboxes of the browser with the fontawesome icons. This works but I'm basicly typing things twice for the hover status. How can I make this without typing the same code twice?

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

AS you can see the &:hover is basicly the sae as &:before, the only differance is the "content". SO How can I remove this duplicated code?

Upvotes: 0

Views: 525

Answers (1)

Sidney Gijzen
Sidney Gijzen

Reputation: 2001

You can use a SASS mixin with an arguments.

Your code would look as follows:

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

Upvotes: 1

Related Questions