CODEWITHSUNDEEP
cssless
Chris
Chris

Reputation: 1317

Can't compile a LESS file into CSS

My less file looks like this:

/*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);
}

etc. I'd need to use it on a shared host without a LESS compiler as it seems. So I wanted to pre-compile it.

lessc functions.less  > functions.css

generates the css file, but it only contains the comments - no code, no other css directives. Did I do anything wrong? Can I solve this problem?

Upvotes: 0

Views: 182

Answers (1)

Raphael Müller
Raphael Müller

Reputation: 971

You have only mixins in your LESS file. Mixins will not result in a CSS output, if used nowhere. See the LESS documentation for more about mixins (in your case, parametric mixins).

Try to remove the parentheses after your selectors, like this:

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

Upvotes: 1

Related Questions