Add a class name to different classes in SASS

Question

I have this structure in an old CSS file:

h1.myClass{
color:red;
font-size:18px;
}
h2.myClass{
color:blue;
font-size:16px;
}
h3.myClass{
color:yellow;
font-size:14px;
}

and i want to do it in a SASS way (if possible). some way that i don't have to repeat myClass several times. maybe, a technique that is similar to nesting in SASS.

Whoops, this is a better duplicate: http://stackoverflow.com/questions/24841482/how-do-i-reference-the-parent-selector-at-the-end — cimmanon, Sep 28 '14 at 16:46

score 1 · Answer 1 · answered Sep 28 '14 at 13:35

1

In SASS it can be done like this:

.myClass
  h1&
    color:red;
    font-size:18px;
  h2&
    color:blue;
    font-size:16px;
  h3&
    color:yellow;
    font-size:14px;

& after selector will take current selector as parent:

h1.myClass

answered Sep 28 '14 at 13:35

antyrat

27,479
9
75
76

Doesn't seem to work. i'd tried it with curly braces and with not, and i get an error message. – JovStern Sep 28 '14 at 16:26

Add a class name to different classes in SASS

1 Answers1