相关疑难解决方法(0)

我注意到用SASS编写的inuit.css有一个.vendor混合:

@mixin vendor($property, $value...){
    -webkit-#{$property}:$value;
       -moz-#{$property}:$value;
        -ms-#{$property}:$value;
         -o-#{$property}:$value;
            #{$property}:$value;
}

有没有办法在LESS中复制一些奇怪的功能,如e()和@ {}？

我正在使用Font Awesome 4.0.0,并希望在LESS中执行类似的操作:

.btn-github {
  .btn;
  .btn-primary;
  margin-left: 3em;

  i {
    .@{fa-css-prefix};
    .@{fa-css-prefix}-github;
    .@{fa-css-prefix}-lg;
    margin-right: 1em;
  }
}

这不会编译错误:

ParseError: Unrecognised input in - on line ...

有可能做到这一点吗？它肯定会为我做一个漂亮的按钮.

有没有办法将一个mixin或style的声明传递给另一个mixin作为输入参数？

我们来看一个动画关键帧的例子.以下是我们如何在纯CSS中定义关键帧:

@-moz-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@-webkit-keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

@keyframes some-name
{
    from { color: red; }
    to { color: blue; }
}

想法是使用mixins简化这些声明,所以我们可以有如下内容:

.keyframes(name, from, to)
{
    // here we need somehow to reproduce structure
    // that we have in an example above
}

// define one animation
.my-from() { color: red; }
.my-to() { color: blue; } …

我正在使用LESS CSS 1.3.3.对不起,如果已经提出这个问题,我在网上找不到任何相关内容.

我有几个看起来像这样的类生成器(示例非常简化,足以触发错误):

#genMarginTop (@name, @size) {
    .@{name} { margin-top: @size; }
}

然后我用它们来生成一些实际的类:

#genMarginTop(mtStandard, 40px);
#genMarginTop(mtHalf, 20px);

到目前为止,很好,LESS正确生成了这些类,我可以在HTML中使用它们.但是,当我想在其他地方重用这样生成的类作为mixin时,我收到一个错误:

.someClass {
    .mtStandard; // won't work, see error below
    // more stuff
}

我得到的错误是:

NameError: .mtStandard is undefined in /.../example.less:161:4
160 .someClass {
161     .mtStandard;
162     // more stuff

当然,我尝试在生成类之后使用mixin .它看起来像 LESS以某种方式在生成它们之后不会在内部注册这些生成的类,但我可能错了.

有没有办法在其他类中重用这些生成的类作为mixins？作为LESS的新手,他们的文档对生成的类相当稀疏,我完全失去了(特别是因为这是mixins似乎接受的唯一语法).

谢谢你读我

注意:我使用这样的类生成器的原因是因为它们比上面的例子复杂得多(想想所有依赖于一组公共参数的嵌套类),并且我将生成的类嵌入到各种@media查询中以支持任何设备类型采用"Zen"方式.最后我得到了类似的东西:

@media (max-width: 1024px) {
    #genSomething(something, somethingParam1, ...);
    #genSomething(somethingElse, somethingElseParam1, ...);
    #genStuff(stuff, stuffParam1, ...);
}
@media (max-width: 240px) { …