CSS to reference another CSS

Question

I'm using a style sheet .t-button for buttons defined as..

.t-button
{
    border-color: #a7bac5;
    color: #333;
}

the definition of this style is generated at runtime in an .axd file

Is there a way to apply this specific style sheet to all normal buttons in my application? something like...

button, input[type="button"], input[type="submit"]  
{
  /*apply "t.button" */  
}

I have often hoped this was the case (being able to apply one elements style to another with a call to the other), but alas, I have never figured out how to do this. I hope I am wrong, but I wonder if it is really possible... — Jared Farrish
– Jared Farrish, Commented Jun 26, 2011 at 22:59

Pekka · Accepted Answer · 2011-06-26 22:59:30Z

5

CSS can't do this, but precompiled CSS extensions like LESS and SASS can.

Example stolen from LESS's front page:

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

and from SASS:

.error {
  border: 1px #f00;
  background: #fdd;
}

.badError {
  @extend .error;
  border-width: 3px;
}

answered Jun 26, 2011 at 22:59

Pekka

451k150 gold badges989 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

foxy · Accepted Answer · 2011-06-26 22:59:56Z

1

Not something you can do at the moment with pure CSS, afaik.

You can use "extensions" in Js or your favourite servers-sided technology that "compiles" CSS, however. ( http://sass-lang.com/ )

answered Jun 26, 2011 at 22:59

foxy

7,6722 gold badges32 silver badges34 bronze badges

Comments

Karl Nicoll · Accepted Answer · 2011-06-26 23:01:00Z

1

Basically no, you'll either have to modify the code creating the axd file to add the extra selectors, or you'll have to update your HTML to use the t-button class.

If it's only two properties though, it would be simple enough to just add the styles again. It's not ideal, and it means duplicating styles (which is against the point of CSS), but needs must.

answered Jun 26, 2011 at 23:01

Karl Nicoll

16.5k3 gold badges53 silver badges65 bronze badges

Collectives™ on Stack Overflow

CSS to reference another CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related