Question

假设我有一个复杂的mixin功能。像

这样的东西

.MyMixin(@Count, @ManyOtherVars)
{
  .Item 
  { 
    width: calc( 100% / @Count);
  }
  //lot's of other rules not affected by @Count
}

然后我想将这个mixin称为不同媒体的不同值 e.g。

.SomeClass
{
  @media screen (max-width: 1000px)
  {
    .MyMixin(5, 1);
  }
  @media screen (min-width: 1000px)
  {
    .MyMixin(10, 1);
  }
}

这很好，除了生成的css复制了所有没有改变的东西

@media screen (max-width: 1000px)
{
  .SomeClass .Item
  {
    width: calc( 100% / 5 );
  }
  .SomeClass 
  {
    /* lot's of other rules not affected by @Count */
  }
}

@media screen (min-width: 1000px)
{
  .SomeClass .Item
  {
    width: calc( 100% / 10 );
  }
  .SomeClass 
  {
    /* lot's of other rules not affected by @Count */
  }
}

不用说，只有一件事发生变化，这是非常浪费的。

是否有任何变通方法可以产生更精简的输出，不需要调用类知道mixin的功能，或者mixin知道媒体规则？我想也许一个独立的规则集可能会有所帮助，但鉴于变量不是从那些我不确定它会导出的变量。

期望的输出：

@media screen (max-width: 1000px)
{
  .SomeClass .Item
  {
    width: calc( 100% / 5 );
  }
}

@media screen (min-width: 1000px)
{
  .SomeClass .Item
  {
    width: calc( 100% / 10 );
  }
}
.SomeClass 
{
  /* lot's of other rules not affected by @Count */
}

Answer 1

从mixin中删除静态样式，并将它们直接放到SomeClass选择器。

.SomeClass {
  // Lot's of other rules not affected by @Count

  @media screen (max-width: 1000px) {
    .MyMixin(5, 1);
  }
  @media screen (min-width: 1000px) {
    .MyMixin(10, 1);
  }
}

更好的解决方案：

.MyMixin(@Count, @ManyOtherVars) {
  width: calc( 100% / @Count);
}

.SomeClass {
  // Lot's of other rules not affected by @Count

  .Item {
    @media screen (max-width: 1000px) {
      .MyMixin(5, 1);
    }
    @media screen (min-width: 1000px) {
      .MyMixin(10, 1);
    }
  }
}

现在mixin只做一件事。它简单易用。

根据媒体（或其他一些条件）更改mixin变量

1 个答案: