Question

我正在尝试调试高级mixin（）。我使用CodeKit作为我的编译器，我不断得到奇怪的输出。

这是mixin（）：

.push(@arr, @tag, @prop, @value){
    -lessMinded:@arr~`api.push(@{arr}, @{tag}, @{prop}, @{value})`
}

.media(@arr){
    -lessMinded:@arr~`api.media(@{arr})`
}

以下是帮助处理mixin（）的JavaScript：

@api:`function(){
    var api = {
        tablet: [],
        push:function(arr, tag, prop, value){
            var str = "";

            str = tag+"{ "+prop+":"+value+" }"
            this[arr].push(str);
        },
        media:function(arr){
            var count = this[arr].length,
                values = "";
            for(var i = 0; i < count; ++i){
                values += this[arr][i]+"\n";
            };
            values = values.substring(0, values.length-1);
            return "; "+values;
        }
    };
    return(api);
}`;

@apiGlobalInjector: `(function() {
    this.api = (@{api})();
    return("LessMinded.com global helper functions");
})()`;

LESS CSS表格中的用法：

body{
    content:"in stylesheet";
    .push("tablet", "body", "padding", "30px")
}
nav{
    .push("tablet", "nav", "margin", "10px")
}
ul{
    .push("tablet", "ul", "margin", "10px")
}
li{
    .push("tablet", "li", "margin", "10px")
}
p{
    .push("tablet", "p", "margin", "10px")
}
a{
    .push("tablet", "a", "margin", "10px")
}

@media only screen and (max-width:1025px){
    .media("tablet")
}

以下是输出：

body {
  content: "in stylesheet";
  -lessMinded: "tablet" ;
}
nav {
  -lessMinded: "tablet" ;
}
ul {
  -lessMinded: "tablet" ;
}
li {
  -lessMinded: "tablet" ;
}
p {
  -lessMinded: "tablet" ;
}
a {
  -lessMinded: "tablet" ;
}
@media only screen and (max-width: 1025px) {
    -lessMinded: "tablet" ; body{ padding:30px }
    nav{ margin:10px }
    ul{ margin:10px }
    li{ margin:10px }
    p{ margin:10px }
    a{ margin:10px };
}

总体：

我知道无论如何呈现“-lessMinded”属性，在这个庄园中使用LESS时这是一个已知问题。这不是错误。

错误是最后一个元素a{ margin:10px };

的媒体查询中的额外分号

在梦境中我也不想传递元素，但我知道没有办法预先阅读选择器。

body{
          //array    tag     property   value
    .push("tablet", "body", "padding", "30px");
}

较少输出额外的分号

0 个答案: