Question

所以我有这样的事情：

@color1: rgba(0, 0, 0, 0);
@color2: rgba(0, 0, 0, 0.7);
#start-view .start1 {
    .imageGradientOverlay(@color1, @color2, "../images/start/start1.jpg");
}

变量是：

.imageGradientOverlay(@color1, @color2, @url-image) {
    background-image: 
        linear-gradient(@color1, @color2), 
        url(@url-image);

    background-image: 
        -webkit-linear-gradient(@color1, @color2), 
        url(@url-image);
}

，编译后的代码如下所示：

#start-view .start1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
  background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)), url("../../../images/start/start1.jpg");
}

问题是 - 为什么在编译时再添加两个../../会减少？

如果我尝试添加此/images/start/start1.jpg代码编译正常但这不是我需要的。

Answer 1

查看LESS options，我相信您已设置rootpath添加该前缀。所以重置rootpath，它应该没问题。

您可以在此处进行测试 - LESS2CSS，只需添加该选项。

在编译为css时，在网址上添加不需要的代码更少

1 个答案: