Is it possible to generalize styles in CSS?

Asked Sep 04 '15 at 09:19

Active Sep 04 '15 at 10:56

Viewed 204 times

At the moment i have styles defined as:

.style1 { background-image: url("../images/kitten1.jpg"); }
.style2 { background-image: url("../images/kitten2.jpg"); }
.style3 { background-image: url("../images/kitten3.jpg"); }

and use it in HTML as:

<div class="style1"></div>
<div class="style2"></div>
<div class="style3"></div>

I have removed the crud but in essence the styles are all the same except for the url string of the background-image. If i require many of such styles it becomes annoying if i want to make a small change to all of them.

A quick search on SO shows it is not possible to pass arguments to CSS because it doesn't interact with HTML. However, i wonder if there is any way in which i could pass the url to only a single style, i.e.:

.style { background-image: url(url_string); }

and apply it in HTML with something like:

<div class="style" url_string="../images/kitten1.jpg"></div>
<div class="style" url_string="../images/kitten2.jpg"></div>
<div class="style" url_string="../images/kitten3.jpg"></div>

using HTML, CSS, JQuery, LESS, SASS, etc?

edited May 23 '17 at 12:29

Community

asked Sep 04 '15 at 09:19

nluigi

1,263
2
15
35

1

ofcourse css preprocessors can use variables. – Jai Sep 04 '15 at 09:28
@Jai - that doesn't answer the question. – Sep 04 '15 at 09:41
1

@JayMee _using CSS, JQuery, LESS, SASS, etc?_........and this was a comment not an answer though. – Jai Sep 04 '15 at 09:46
1

@Harry - sure, i used an answer from the duplicate to solve my problem – nluigi Sep 04 '15 at 10:11

Is it possible to generalize styles in CSS?

0 Answers0