Change colour but keeps same styles.

[Sarfaraj]

@Paulie_D I think that’s not working properly.
because div choose only one value red because red is first class of this div.

[Kitty Giraudel]

> @Paulie_D I think that’s not working properly. because div choose only one value.

No. It’s only a matter of specificity / order or rules.

[braadd]

so if I have it like this

.flat.red {
background: #bf3f3f;
}

.flat.pink {
background: #bf3fb4;
}

.flat.purple {
background: #963fbf;
}

.flat.blue {
background: #3f3fbf;
}

is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating

[Sarfaraj]

@HugoGiraudel Yes you are right.

[Paulie_D]

`.flat` (as you have used it) will define the size of the element.

`.red` will define the background color

.`flat.blue` defines nothing in and of itself except it only targets elements with **both** classes.

http://codepen.io/Paulie-D/pen/yHAaj

In the example above, try deleting the bg color from `.flat.blue`…only the `.flat` class will apply because no `.blue` class has been defined.

[TheDoc]

> is there a way so I only have .flat in once and then it applys to the rest so it is not too much repeating

If you’re just looking at saving a way for you to have to write it out, you’ll want to use Sass/Scss:

.flat {
height: 60px;
width: 150px;

&.red {
background: #bf3f3f;
}

&.pink {
background: #bf3fb4;
}

&.purple {
background: #963fbf;
}

&.blue {
background: #3f3fbf;
}
}

[Author]

Posts