Clever Geek Handbook

Including styles in another style

So, I've been pondering this, and I don't think it exists. I also understand that my logic is that the styles are trying to accommodate, but give it the option:

Let's 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 this to my footer, which I would in my HTML text:

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

That's fine, but what if I want to add this element to a row of my elements. Let's say I want to add it to my navigation too, so I would have to add this class to each element:

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

My question is appose to declare it through a class or style, is there no way to "attach" a style to another style in my stylesheet? (eg:)

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

So I can keep my code to a minimum by creating "base styles" and then attaching those styles to individual styles in my stylesheet? This is again a question and not something I would like to apply, but I suppose with the above it would be "nice to have" for people working with brand-oriented official documents and want to attach specific styles to individual styles without going to html to do this.

Any ideas? Does it exist?

+3


source to share


4 answers


I don't see any advantages. What you are asking for is not standard CSS. You can define this for all elements with the classblue_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;
}

Anything .blue_bold will be used unless overwritten. What's wrong?

-2


source


You cannot do this with pure CSS. You will need to use LESS or SASS / SCSS to generate your CSS.

Examples of syntax are here:

SMALLER



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

SCSS

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


source


you will need to look at sass or less, these are your best options.

sass here

less here

0


source


You can use sass or less, but a simpler little workaround is to simply list the elements in your css like this:

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


source






More articles:


All Articles