css - 无法将 LESS 文件编译成 CSS

Question

我的 less 文件是这样的:

/*Style*/
.themeStyle(){
    font-weight:normal;
    text-transform:capitalize;
    text-transform:none;
}
.styleTitleBlock(@padding; @margin){
    text-transform:uppercase;
    padding:@padding;
    margin:@margin;
    text-align: left;
}
.hideText(){
    display: inline-block;
    text-indent: -99999px;
    overflow: hidden;
    vertical-align: middle;
    text-align: left;
    float: left;
    .themeStyle();
}
.themePosition(){
    position:absolute;
    top:0;
    left:0;
}
/*color text * color text hover*/
.link(@color; @colorhover){
    color: @color;
    &:hover,
    &:focus,
    &:active {
        color: @colorhover;
        text-decoration:none;
    }
}
/*========================= Functions==================*/
/*Change Font*/
.changeFont (@font){
    font: @font;
}

/*Change Text Color*/
.changeColor (@color){
    color: @color;
}
/*Change Line*/
.changeLine (@linecolor){
    border-color: @linecolor;
}
/*Change Background Color*/
.changeBkg (@bgkcolor){
    background-color: @bgkcolor;
}
/*Change Background Image Color*/
.changeBkg (@bkgcolor; @bkgurl; @bkgname; @bkgposition; @bkgrepeat){
    background-color:@bkgcolor;
    background-image:url("@{bkgurl}@{bkgname}");
    background-position:@bkgposition;
    background-repeat:@bkgrepeat;

}

/*Change Color-Border-Background Color*/
.changeAllColor(@color; @bgkcolor){
    .changeColor (@color);
    .changeBkg (@bgkcolor);
}
.changeAllColor(@color; @linecolor; @bgkcolor){
    .changeColor (@color);
    .changeLine (@linecolor);
    .changeBkg (@bgkcolor);
}

等 我需要在没有 LESS 编译器的共享主机上使用它。所以我想预编译它。

lessc functions.less  > functions.css

生成 css 文件，但它只包含注释 - 没有代码，没有其他 css 指令。 我做错了什么吗？ 我能解决这个问题吗？

Answer 1

你的 LESS 文件中只有 mixins。如果不在任何地方使用，Mixins 将不会产生 CSS 输出。查看LESS documentation有关混合的更多信息(在您的情况下，参数混合)。

尝试删除选择器后的括号，如下所示:

.hideText {
    display: inline-block;
    text-indent: -99999px;
    overflow: hidden;
    vertical-align: middle;
    text-align: left;
    float: left;
    .themeStyle();
}