相关疑难解决方法(0)

经过一些挖掘后,我发现这是我需要为桌子设置圆角的最佳响应.

这引出了我以下的CSS片段:

.greytable tr:first-child th:first-child {
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
}

.greytable tr:first-child th:last-child {
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
}

.greytable tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.greytable tr:last-child td:last-child {
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

现在我想知道如何用LESS简化所有这些.我尝试了以下LESS代码:

.border-radius (@v, @h, @radius: 5px) {
    -moz-border-radius-@v@h: @radius;
    -webkit-border-@v-@h: @radius;
    border-@v-@h: @radius;
}

然后调用它(左上角):

.greytable tr:first-child th:first-child {
    .border-radius('top', 'left')
}

但它不起作用(LESS片段的第二行出错).

提前致谢!

合乎逻辑的方式是:

.mymixin() {
  sample_key: samplevalue;
}

@avar:  mymixin;
.@{avar}();

但我得到一个解析错误.

有办法吗？

我最近将一些CSS转换为LESS以用于.NET应用程序(我使用dotless for .NET,http://www.dotlesscss.org/在运行时编译LESS).

编译器正在落在这两个代码块上:

@viewport {
  width: device-width;
}
/* Add a min-width for IE 8 and lower */
@media \0screen\,screen\9 {
    body {
        min-width: 960px;
    }
}

仅供您参考,上面的媒体查询是一种针对IE的hacky方式

我怎么能"轻视"这些代码块呢？

我如何逃避以下事项:

.prefix(@rule, @prop) {
  -webkit-@{rule}: @{prop};
  -moz-@{rule}: @{prop};
  -o-@{rule}: @{prop};
  -ms-@{rule}: @{prop};
  @{rule}: @{prop};
}

我已经尝试了一些不同的方法,将它包装起来~"stuff",包含变量@{var},反复使用-...没有成功!

编辑:在Github上有一个拉动请求:https://github.com/cloudhead/less.js/pull/698

我制作了以下两个Mixins：

.responsive_color(@color, @response_color, @speed: 0.1s){
     color:                  @color;
    .transition(color, @speed);

    &:hover, &:active, &:focus{
        color:                  @response_color;
    }
}

.responsive_background(@color, @response_color, @speed: 0.1s){
    background-color:       @color;
    .transition(background-color, @speed);

    &:hover, &:active, &:focus{
        background-color:       @response_color;
    }
}

由于这两个几乎是相同的，所以我想将它们组合成如下形式：

.responsive(@property, @color, @response_color, @speed: 0.1s){
    @property:              @color;
    .transition(@property, @speed);

    &:hover, &:active, &:focus{
        @property:                  @response_color;
    }
}

虽然这不会在LESS解析器（PHP类）中引起错误，但将其忽略。我也尝试过@ {property}和'@ {property}'，但两者都会导致错误。

有谁知道我如何输出@property进行正确解析？还是我试图做一些不可能的事情？

我是新手。我正在尝试将 css 属性作为这样的参数传递

.border(@position:"left",@color: #ddd){
    border-@position :1px solid @color;   
}

意味着每次我打字

.border(right,#efefef);

它应该输出

border-right:1px solid #efefef;

我正在使用 winless 编译代码 Winless version 1.8.3 和 LESS.js version 1.7.3

Winless 编译器报错

ParseError：在“行号等”行的“我的文件路径”中无法识别输入

在我寻找答案时，我发现这些问题大约 1 岁了，他们说这是不可能的（当时），因为 LESS 不支持它现在有可能吗？

如何在less中将属性名称作为参数传递给mixin

如果我使用这个，这个问题的答案使用了一个黑客来实现目标

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

发送属性作为 mixin 的参数

回答：

在这里找到答案感谢其中的评论

这解决了问题 我几乎答对了

.border(@position:"left";@color:#ddd){
    border-@{position}:1px solid @color;
}

可以使用

.border(right,#efefef)

所以这编译为：

border-right: 1ps solid #efefef;

在 LESS 中使用属性名称中的变量（动态属性/属性名称插值）