CODEWITHSUNDEEP
htmlcsssass
supersize
supersize

Reputation: 14773

Avoid double writing styles

I would like to know how I can avoid writing certain styles twice if they are the same for an element and it's possible pseudo classes:

.element {
  color: #a0c225;
  &:hover {
    color: #a0c225;
  }
  &:focus {
    color: #a0c225;
  }
}

and I don't want to repeat the color #a0c225 in SASS?

Upvotes: 0

Views: 72

Answers (2)

Alex
Alex

Reputation: 829

I would use something like this:

$col-example: #a0c225;

%class-example {
  color: $col-example
}

.element {
  @extend %class-example;
  /* more properties */
  &:hover {
    @extend %class-example;
    /* more properties */
  }
  &:focus {
    @extend %class-example;
    /* more properties */
  }
}

which will compile to:

.element, .element:hover, .element:focus {
    color: #a0c225;
}

.element {
  /* more properties */
  &:hover {
    /* more properties */
  }
  &:focus {
    /* more properties */
  }
}

Upvotes: 0

neatnick
neatnick

Reputation: 1508

You could use & to do something like this:

.element {
    &, &:hover, &:focus {
        color: #a0c225;
    }
}

Which would compile to:

.element, .element:hover, .element:focus {
    color: #a0c225;
}

Upvotes: 1

Related Questions