CODEWITHSUNDEEP
cssstylus
Wex
Wex

Reputation: 15695

Stylus - reference property from extended selector using property lookup

I'd like to find a way to reference a property from an extended selector. Unfortunately, property lookup doesn't seem to work for this:

.foo
  font-size 12px
.bar
  @extends .foo
  line-height @font-size * 2

/* Output */
.foo,
.bar {
  font-size: 12px;
}
.bar {
  line-height: ;
}

This seems like it should be possible. Here's a simple example without @extends:

.foo
  font-size 12px
  line-height @font-size * 2

/* Output */
.foo {
  font-size: 12px;
  line-height: 24px;
}

Feel free to try this out for yourself: https://learnboost.github.io/stylus/try.html

Upvotes: 1

Views: 679

Answers (1)

henk
henk

Reputation: 2838

you are neglecting the scope! See commented code below:

.foo
  font-size 12px
.bar
  font-size 12px  //<< as long as there is no font-size in .bar scope, you cant reference to it. For that cases use variables.
  @extends .foo
  line-height @font-size * 2 

/* Output */
.foo,
.bar {
  font-size: 12px;
}
.bar {
  line-height: 24px;
}

with variables

f-size = 12px
.foo
  font-size f-size
.bar
  font-size f-size  
  @extends .foo
  line-height @font-size * 2
  //or
  line-height @f-size * 2
  //or
  line-height f-size * 2


 /* Output */
    .foo,
    .bar {
      font-size: 12px;
    }
    .bar {
      line-height: 24px;

    }

Upvotes: 1

Related Questions