0

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?

Nizam
  • 4,569
  • 3
  • 43
  • 60
supersize
  • 13,764
  • 18
  • 74
  • 133

2 Answers2

1

You could use & to do something like this:

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

Which would compile to:

.element, .element:hover, .element:focus {
    color: #a0c225;
}
neatnick
  • 1,489
  • 1
  • 18
  • 29
  • @supersize Glad to be able to help – neatnick May 11 '15 at 14:11
  • @Alex if you have a look at: http://stackoverflow.com/questions/13608855/what-does-an-before-a-pseudo-element-in-css-mean you will notice that an `&` sign is not CSS, it is SASS/LESS way of connecting selectors, so this is a valid answer which fits my needs the best! – supersize May 11 '15 at 14:39
  • yes you're right, for me it was just too close to css to need sass ;) – Alex May 11 '15 at 14:41
0

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 */
  }
}
Alex
  • 799
  • 5
  • 15
  • thanks for your answer. I'm pretty sure there is something like a `&` method that works. I don't necessarily need to store variables. – supersize May 11 '15 at 13:58
  • if you havent specified any other colors for focusing und hovering, the color will stay the same as in normal state at all – Alex May 11 '15 at 14:06