修复（我认为）

Question

我最近决定使用LESS。所以我正在从css迁移到更少。

对于mixins，我有一些不明白的事情。当然，我阅读了文档，并阅读了一些关于mixins的内容。我已经对StackOverflow做了一些研究，但我没有发现任何问题。

我有更少的代码：

navbar{
  position: relative;
  display: block;
  height: 100%;
  margin-bottom: 2px;

  .mixin-subtitle{
    display: block;
    background: @white;
    position: absolute;
    width: 100%;
    left: 1px;
    padding-left: 10%;
    line-height: 24px;
  }
  .mixin-type{
    font-family: 'icon-mvp';
    height: 100%;
    width: 9.5%;
    position: absolute;
    background: rgba(156,178,189,0.65);
    left: 1px;
    font-size: 24px;
    color: #fff;
    text-align: center;
    text-shadow: 0px 0px 10px @blue;
  }
  .artist{

    subtitle{
      .mixin-subtitle();
    }
    .type{
      .mixin-type();

      &:before{
        content: "\e607";
      }
    }
  }
  .album{

    subtitle{
      .mixin-subtitle();
    }
    .type{
      .mixin-type();

      &:before{
        content: "\e608";
      }
    }
  }
  .song{

    subtitle{
      .mixin-subtitle();
    }
    .type{
      .mixin-type();

      &:before{
        content: "\e614";
      }
    }
  }
}

mixins不起作用。我试图将mixins放在我文件的开头。我尝试在我的mixins声明之后放入（）。它仍然不起作用...... 现在我用less.js在live上编译较少，我试图用lessc自己编译它，它仍然不起作用。我不明白为什么。

有人可以帮助我吗？

修改的

有些事我不明白。如果我把副标题或.type作为我的mixins的兄弟，那就行了。但如果我把它放在艺术家，歌曲或专辑之下，它就不会......

所以在这段代码中，mixins被称为：

navbar {
...

.mixin-type{
    font-family: 'icon-mvp';
    height: 100%;
    width: 9.5%;
    position: absolute;
    background: rgba(156,178,189,0.65);
    left: 1px;
    font-size: 24px;
    color: #fff;
    text-align: center;
    text-shadow: 0px 0px 10px @blue;
  }

.type{
      .mixin-type();

      &:before{
        content: "\e607";
      }
   }
}

对于mixins来说，确实有一些我不理解的东西......

的 EDIT2 的

预期css：

.artist subtitle, .album subtitle, .song subtitle{
  display: block;
  background: #fff;
  position: absolute;
  width: 100%;
  left: 1px;
  padding-left: 10%;
  line-height: 24px;
}
.artist .type, .album .type, .song .type{
  font-family: 'icon-mvp';
  height: 100%;
  width: 9.5%;
  position: absolute;
  background: rgba(156,178,189,0.65);
  left: 1px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 10px 0000ff;
}
.artist .type:before{
  content: "\e607";
}
.album .type:before{
  content: "\e608";
}
.song .type:before{
  content: "\e614";
}

Answer 1

修复（我认为）

根据您对所期望的内容的编辑，您似乎不想做混合，而是扩展。在你的输出css中，你没有注意到你的原始代码嵌套在navbar“元素”中的所有内容。假设嵌套仍然如此，那么你真正想要的可能是这样的：

<强> LESS

navbar{
  position: relative;
  display: block;
  height: 100%;
  margin-bottom: 2px;

  .mixin-subtitle {

    display: block;
    background: #fff;
    position: absolute;
    width: 100%;
    left: 1px;
    padding-left: 10%;
    line-height: 24px;

  }
  .mixin-type {

    font-family: 'icon-mvp';
    height: 100%;
    width: 9.5%;
    position: absolute;
    background: rgba(156,178,189,0.65);
    left: 1px;
    font-size: 24px;
    color: #fff;
    text-align: center;
    text-shadow: 0px 0px 10px #00f;

  }
  .artist{

    subtitle {
      &:extend(navbar .mixin-subtitle);
    }
    .type{
      &:extend(navbar .mixin-type);

      &:before{
        content: "\e607";
      }
    }
  }
  .album{

    subtitle {
      &:extend(navbar .mixin-subtitle);
    }
    .type{
      &:extend(navbar .mixin-type);

      &:before{
        content: "\e608";
      }
    }
  }
  .song{

    subtitle {
      &:extend(navbar .mixin-subtitle);
    }
    .type{
      &:extend(navbar .mixin-type);

      &:before{
        content: "\e614";
      }
    }
  }
}

CSS OUTPUT

navbar {
  position: relative;
  display: block;
  height: 100%;
  margin-bottom: 2px;
}
navbar .mixin-subtitle,
navbar .artist subtitle,
navbar .album subtitle,
navbar .song subtitle {
  display: block;
  background: #fff;
  position: absolute;
  width: 100%;
  left: 1px;
  padding-left: 10%;
  line-height: 24px;
}
navbar .mixin-type,
navbar .artist .type,
navbar .album .type,
navbar .song .type {
  font-family: 'icon-mvp';
  height: 100%;
  width: 9.5%;
  position: absolute;
  background: rgba(156, 178, 189, 0.65);
  left: 1px;
  font-size: 24px;
  color: #fff;
  text-align: center;
  text-shadow: 0px 0px 10px #00f;
}
navbar .artist .type:before {
  content: "\e607";
}
navbar .album .type:before {
  content: "\e608";
}
navbar .song .type:before {
  content: "\e614";
}

如果您实际上不希望选择器字符串中有navbar，那么您需要删除所有代码嵌套在navbar内。

了解Mixins

Mixins只是将代码“复制”到您指定的位置（不会发生分组）。您的原始代码就是在我运行时，所有属性都在他们自己的选择器块下复制到navbar .artist subtitle，navbar .album subtitle等。上面的代码使用:extend()来复制代码，但将代码组合在一起。

改进上述代码

您实际上可以消除额外的.mixin-subtitle和.mixin-type类，并以这种方式进行扩展（在其中一个组中定义所有类），我在这里.artist）：

<强> LESS

navbar{ position: relative; display: block; height: 100%; margin-bottom: 2px; .artist { subtitle { display: block; background: #fff; position: absolute; width: 100%; left: 1px; padding-left: 10%; line-height: 24px; } .type { font-family: 'icon-mvp'; height: 100%; width: 9.5%; position: absolute; background: rgba(156,178,189,0.65); left: 1px; font-size: 24px; color: #fff; text-align: center; text-shadow: 0px 0px 10px #00f; &:before{ content: "\e607"; } } } .album{ subtitle { &:extend(navbar .artist subtitle); } .type{ &:extend(navbar .artist .type); &:before{ content: "\e608"; } } } .song{ subtitle { &:extend(navbar .artist subtitle); } .type{ &:extend(navbar .artist .type); &:before{ content: "\e614"; } } } }

输出CSS（清洁工具）

navbar { position: relative; display: block; height: 100%; margin-bottom: 2px; } navbar .artist subtitle, navbar .album subtitle, navbar .song subtitle { display: block; background: #fff; position: absolute; width: 100%; left: 1px; padding-left: 10%; line-height: 24px; } navbar .artist .type, navbar .album .type, navbar .song .type { font-family: 'icon-mvp'; height: 100%; width: 9.5%; position: absolute; background: rgba(156, 178, 189, 0.65); left: 1px; font-size: 24px; color: #fff; text-align: center; text-shadow: 0px 0px 10px #00f; } navbar .artist .type:before { content: "\e607"; } navbar .album .type:before { content: "\e608"; } navbar .song .type:before { content: "\e614"; }

你可以看到上面的代码没有输出然后输出（我假设）未使用的.mixin-subtitle和.mixin-type类，而只是你正在使用的类。

较少的mixins不起作用

1 个答案:

修复（我认为）

了解Mixins

改进上述代码