css - Stylus - 使用属性查找从扩展选择器中引用属性

Question

我想找到一种从扩展选择器中引用属性的方法。不幸的是，property lookup似乎不适用于此:

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

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

这看起来应该是可能的。这是一个没有 @extends 的简单示例:

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

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

请自行尝试:https://learnboost.github.io/stylus/try.html

Answer 1

你忽略了范围!请参阅下面的注释代码:

.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;
}

有变量

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;

    }