less - 可以替换其他混合中使用的混合吗？

Question

我有一些 Less mixin 用于创建站点导航，这在每个项目中基本相同。

我已经通过全局变量使其可编辑，但是对于嵌套元素，这些变量变得冗长且笨拙。例如：

@nav-main-sub-menu-item-title-text-transform: uppercase;

如果我可以禁用特定的嵌套 mixin，然后手动重新实例化它，那就太好了。

// Main nav

.Nav() {

  .nav {

    display:block;

    & when (@Nav-Item = default) {
      .Nav-Item();
    }

    // Would be nice to insert a custom .Nav-Item() here
    // when @Nav-Item is set to 'custom'

  }

}

.Nav();

// Enables Nav-Item

@Nav-Item: default;

// Nav item

.Nav-Item(@color: red) {

  .item {

    color: @color;

  }

}

// Override 

@Nav-Item: custom;

.Nav-Item(@color: blue);

我可以将 '.nav' 添加到项目 mixin 本身中以使其更加自我封装，但这违背了“不要重复自己”的口头禅......

另外，媒体查询等使事情变得比这个简单的例子更复杂。

.Nav-Item(@color: red) {

  .nav {

    .item {

      color: @color;

    }

  }

}

我不知道是否有一个好的解决方案，但我只是想我会把它放在那里。

标签： less