开发者

OO like behaviour in CSS: inheritance possible?

开发者 https://www.devze.com 2023-02-06 07:07 出处:网络
I have a simple border style say: .border { /*content*/ } I 开发者_运维技巧want several other classes to inherit this border style. Can this be done in CSS only?

I have a simple border style say:

.border 
{
   /*content*/
}

I 开发者_运维技巧want several other classes to inherit this border style. Can this be done in CSS only? Or do I need to specify it in HTML also?

I want:

.actionArea : .border
{ 
     /*content */
}

Or can this only be done in HTML like:

<div class="actionArea border"/>

It would be very annoying if the latter is only possible.

Update

This works good enough, but still is a bit ugly:

.actionArea, .otherArea, .anotherArea
{
    /*border specification */     
}

.actionArea
{
    /*area specification/*
}

.otherArea
{
    /*area specification/*
}

(..)


You will need to use a CSS framework such as LESS for such a thing.


You may use sass . Probably it is the nesting feature you want to use http://sass-lang.com/#nesting

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

Or as Oded said you can use LESS . LESS is having some interesting feature one of them is mixins . This is not exactly inheritance but it gives you has-a relationship in css

Example copied from LESS

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}
0

精彩评论

暂无评论...
验证码 换一张
取 消