I am using Stylus to pre-process my CSS and have found that it would be extremely convenient if I could figure out a way to define stylesheets in the following way:

// This is a template for an element which can contain content.
$content-container
    font-family tahoma, arial, sans-serif
$content-container p
    blah
$content-container ul
    blah
$content-container li
    etc.

// Then I would like to promote specific elements into content containers:
.blog article
    @extend $content-container
.release-notes main
    @extend $content-container

So the idea is that above would yield something like the following:

.blog article,
.release-notes main {
    font-family: tahoma, arial, sans-serif;
}
.blog article p,
.release-notes main p {
    blah
}
.blog article ul,
.release-notes main ul {
    blah
}
.blog article li,
.release-notes main li {
    etc.
}

Is there a way to achieve this? it would certainly make things a lot easier!!

有帮助吗?

解决方案

Okay... it looks like this is the default behaviour after all.

It seems that using @extend within the template $content-container causes this to break:

$content-container
    p
        @extend $standard-paragraph

I worked around this issue by using a mixin instead:

$content-container
    p
        $standard-paragraph()

Whilst this solves my problem; I would be interested to know whether the behaviour of @extend is a bug or whether it is the intended behaviour.

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top