how to put a css class inside of a css class?

Question

.mac{margin-left:auto; margin-right:auto;}

.table{.mac; color:red;}

I want to be able to do that, it doesn't make sense to me why I would need to do:

.table{margin-left:auto; margin-right:auto; color:red;}

I know for the table I could do:

<table class="table mac">

or just type the .table{margin-left:auto; margin-right; color;} like above but that seems redundant.

Is there some way to do what I'm trying to accomplish in my first statement, is there some special syntax that I'm not aware of to make this work?

Answer 1

You can combine multiple CSS selectors on the same line with a comma:

.mac, .table
{
    margin-left:auto;
    margin-right:auto;
}

.table
{
    color:red;
}

Answer 2

The short answer is no, you can't "include" other CSS classes or "inherit" them so to speak.

There are tools you can use to abstract that kind of stuff for you, though. LESS comes to mind. I think the "mixin" is what you're looking for.

Here is a code sample from the LESS front page:

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

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners(10px);
}

Answer 3

.table, .mac {margin-left:auto; margin-right:auto;}
.table {color:red;}