无法将 LESS 文件编译成 CSS
Can't compile a LESS file into CSS
我的 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 指令。
我做错了什么吗?
我能解决这个问题吗?
您的 LESS 文件中只有 mixin。 Mixins 不会导致 CSS 输出,如果不在任何地方使用。有关 mixins 的更多信息(在您的情况下,参数 mixins),请参阅 LESS documentation。
尝试删除选择器后的括号,如下所示:
.hideText {
display: inline-block;
text-indent: -99999px;
overflow: hidden;
vertical-align: middle;
text-align: left;
float: left;
.themeStyle();
}
我的 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 指令。 我做错了什么吗? 我能解决这个问题吗?
您的 LESS 文件中只有 mixin。 Mixins 不会导致 CSS 输出,如果不在任何地方使用。有关 mixins 的更多信息(在您的情况下,参数 mixins),请参阅 LESS documentation。
尝试删除选择器后的括号,如下所示:
.hideText {
display: inline-block;
text-indent: -99999px;
overflow: hidden;
vertical-align: middle;
text-align: left;
float: left;
.themeStyle();
}