Question

Assume that we have the following in LESS:

.large-heading {
   font-family:Helvetica, Arial, sans-serif;
   font-weight:bold;
   font-size:24px;
   text-transform:uppercase;
   line-height:1.2em;
   color:#ccc;
}
.med-heading {
   .large-heading;
   font-size:18px;
}

which perfectly works. I want to have the same effect, don't repeat the attributes of the fist to the second using Stylus. How can I achieve that? I tried the previous on Stylus and it doesn't work.

Was it helpful?

Solution

I guess you're looking for this

Here's a simple example

.a
  color: red

.b
  width: 100px

.c
  @extend .a, .b
  height: 200px

which outputs

.a,
.c {
  color: #f00;
}
.b,
.c {
  width: 100px;
}
.c {
  height: 200px;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top