xCSS

Extending objects

One of the killer features of xCSS is the possibility to make use of selector inheritance. By using the extends keyword, you can let selector declarations inherit properties from existing ones. Substantially the same concept used by OO languages. Using extends in xCSS enables you to write complex models, clearer code review and lightweight output with the CSS comma construction.

A very basic extend looks like this:

.basicClass {
    padding: 20px;
    background-color: #FF0000;
}
.specialClass extends .basicClass {}

.specialClass,
.basicClass {
    padding: 20px;
    background-color: #FF0000;
}

You may also override properties or add new. Identical selectors properties that gets parsed most recently wins over the others

.basicClass {
    padding: 20px;
    background-color: #FF0000;
}
.specialClass extends .basicClass {
    padding: 10px;
    font-size: 14px;
}

.specialClass,
.basicClass {
    padding: 20px;
    background-color: #FF0000;
}
.specialClass {
    padding: 10px;
    font-size: 14px;
}

You can also extend and override children of a class.

.basicClass {
    self {
        padding: 20px;
        background-color: #FF0000;
    }
    a {
        text-decoration: none;
    }
}
.specialClass extends .basicClass {
    padding: 10px;
    font-size: 14px;
}
.specialLink extends .basicClass a {}

.specialLink,
.specialClass a,
.basicClass a {
    text-decoration: none;
}
.specialClass,
.basicClass {
    padding: 20px;
    background-color: #FF0000;
}
.specialClass {
    padding: 10px;
    font-size: 14px;
}

Multiple extends enhance the re-usability of your modules.

.basicList {
    li {
        padding: 5px 10px;
        border-bottom: 1px solid #000000;
    }
    dd {
        margin: 4px;
    }
    span {
        display: inline-block;
    }
}
.roundBox {
    some: props;
}
.specialClass extends .basicList & .roundBox {}

.specialClass li,
.basicList li {
    padding: 5px 10px;
    border-bottom: 1px solid #000000;
}
.specialClass dd,
.basicList dd {
    margin: 4px;
}
.specialClass span,
.basicList span {
    display: inline-block;
}
.specialClass,
.roundBox {
    some: props;
}

You can use the same extend rules on child objects, too.

.basicList {
    li {
        padding: 5px 10px;    
        border-bottom: 1px solid #000000;
    }
    dd {
        margin: 4px;
    }
    span {
        display: inline-block;
    }
}
.specialClass {
    dt extends .basicList li {}
}

.specialClass dt,
.basicList li {
    padding: 5px 10px;
    border-bottom: 1px solid #000000;
}
.basicList span {
    display: inline-block;
}
.basicList dd {
    margin: 4px;
}

You can extend selectors across files, but make sure the parent selector is already parsed by xCSS specified.

Found an error on this page? Please help to correct it!