Including styles within another style

Question

So I have been pondering about this and I don't think this exists. I also understand that my logic my be counter with what stylesheets are trying to accommodate, but let's give it a go:

Take the following example:

 // Example "template style"
 .blue_bold {
      color: blue;
      font-weight: bold;
      /* other styles can go here */
 }

So let's say I want to add that to my footer I would in my HTML go:

 <div class="blue_bold" id="footer">
      // Content goes here
 </div>

This is perfect, but what if I want to add that element to a number of my elements. Say I want to add it to my navigation as well, I would then have to add that class to each element:

 <div class="blue_bold" id="navigation">
      // Content
 </div>
 ....
 <div class="blue_bold" id="footer">
      // Content
 </div>

My question is, as appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet? (as example:)

 #navigation, #footer  {
      attach_style(".blue_bold");
 }

That way I can minimize my code by creating "base styles" and then attach those styles to individual styles within my stylesheet? This is again just a question, not something I wish to impliment, but I figure that given the above it would be a "nice to have" for people working with say brand guideline documents and want to attach specific styles to individual styles without going to the html to do it.

Any ideas? Does this exists?

See : http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — DhruvPathak, Feb 13 '13 at 10:47

score 5 · Answer 1 · answered Feb 13 '13 at 11:00

5

You can't do it with pure CSS. You'll need to use LESS, or SASS/SCSS to generate your CSS.

Syntax examples here :

LESS

.blue_bold {
    color: blue;
    font-weight: bold;
}
#navigation, 
#footer {
    .blue_bold;
}

SCSS

.blue_bold {
    color: blue;
    font-weight: bold;
}
#navigation, 
#footer {
    @extend .blue_bold;
}

answered Feb 13 '13 at 11:00

zessx

68,042
28
135
158

Why should he use additional JavaScript libraries when you can achieve the same with simple CSS? – Mike Feb 13 '13 at 11:05
1

Because that was the question : "As appose to declaring it via a class or style, is there no way to "attach" the style to another style within my stylesheet?". PS : when did SASS and LESS became JavaScript libraries ? – zessx Feb 13 '13 at 11:08
As far as I know LESS uses a less.js to "parse" .less files. – Mike Feb 13 '13 at 11:24
I'm using SCSS on my angular project, this "extend" approach works very well, was the solution for me. For the people asking why would you use this, on my case I needed it because I want all the tables to have the "Elevation" style from material, so I "extended" TABLE with "elevation" and that did the trick. – Yogurtu Mar 20 '22 at 14:16

score 1 · Answer 2 · answered Feb 13 '13 at 11:02

1

You can use sass or less but a more basic slight workaround is just to list the elements in your css like so:

#navigation,
#footer,
.some-other-element,
.another-element
{
      // css styles go here that you want to apply to each element listed above
}

answered Feb 13 '13 at 11:02

Billy Moat

20,792
7
45
37

This is the most logic workaround which I did not think about :) The only "downfall" I can see with this is that if I follow this and redeclare footer later human error could be to add colour to 2 elements, so effectively I have #footer declared twice or multiple times in the same stylesheet which can become *** troubleshooting later :) But this is a good idea – mauzilla Feb 13 '13 at 11:12

score 0 · Answer 3 · answered Feb 13 '13 at 11:00

0

you will need to have a look on sass or less they are your best options.

sass here

less here

answered Feb 13 '13 at 11:00

fahad.kazi

376
1
2
15

Mike · Accepted Answer · 2013-02-13T11:31:05.910

-5

Can't see any benefits. What you're asking for is not a standard CSS. You can define this for all elements with class blue_bold

.blue_bold {
     color: blue;
     font-weight: bold;
     /* other styles can go here */
}

For this block

<div class="blue_bold" id="navigation"></div>

You can simply add another declaration like this:

#navigation, #footer {
     background: black;
     color: red;
}

Everything from .blue_bold will be used unless overwritten. What's wrong about it?

edited Feb 13 '13 at 11:31

answered Feb 13 '13 at 11:02

Mike

1,158
5
22
32

This is not the question. This is already what Mautitz Swanepoel have, and he precisely want to avoid using `blue_bold` class in the HTML file. – zessx Feb 13 '13 at 11:09
There is not a solution, yes LESS or SASS are not a solution. The real solution will be a syntax as SASS or LESS in the next version of css. – tres.14159 Mar 29 '19 at 00:00

Including styles within another style

4 Answers4