LESS：使用变量的继承 [英] LESS: Inheritance using a variable

问题描述

我正在学习第一次使用CSS预处理器（LESS），并且在父类是变量名时尝试定义继承类的类时遇到麻烦。

这基本上是我想要做的：

  @importfont-awesome / font-awesome。少
 
 .icon-application-home {
 .fa .fa-home; 
} 
  

但是fa在Font Awesome中定义如下：

  @ fa-css-prefix：fa; 
  

那么较少的不会编译，因为它不能识别。所以我试试这个：

  @importfont-awesome / font-awesome.less
 
 .icon-application-home {
。@ {fa-css-prefix}。@ {fa-css-prefix} -home; 
} 
  

然而，这也不工作。是否有任何解决方法？我可以在这里做什么？

EDIT

：

导入后，我的.less文件中缺少Font-Awesome.less变量

请执行以下操作：

  @import（less）../font-awesome.css; 
 
 .icon-home {
 .fa;但是，我注意到 .fa-home       / code>不存在...只有 .fa-home：之前 ...所以我试过：
  @import（less）../font-awesome.css; 
 
 .icon-home {
 .fa; 
 .fa-home：before; 
} 
  
和
  @import（less）../font-awesome.css; 
 
 .icon-home {
 .fa; 
} 
 .icon-home：before {
 .fa-home：before; 
} 
  
任何想法？
解决方案
假设你使用包含Less 1.4.2的WE2012，最简单的解决方案是：
  @import（less）../font-awesome.css; 
 
 .icon-application-home {
&：extend（.fa，.fa-home all）; 
} 
  
或：
  @import（less）../font-awesome.css; 
 
 .icon-application-home 
：extend（.fa，.fa-home all）{
 
} 
  
阅读  extend 文档，以了解有关此项工作原理的详细信息。 
 
 
 
 
 
 
如果您升级到集成Less 1.6.x的IDE / Compiler，您将能够：
  @import... / font-awesome.less
 
 .icon-application-home {
 .fa; 
&：before {content：@ fa-var-home} 
} 
  
在这里，你仍然不能使用 .fa-home 或 .fa-home：之前第一个没有定义，第二个不是有效的mixin选择器，幸运的是&：before {content：@ fa-var-home}  .fa-home 。 
一般来说，基于 extend 的解决方案是更优化的，因为它产生更紧凑的CSS。 
 
I am learning to use a CSS preprocessor for the first time (LESS) and having trouble with trying to define a class which inherits a class when that parent class is a variable name..

This is basically what I want to do:
@import "font-awesome/font-awesome.less"

.icon-application-home{
    .fa .fa-home;
}
but as fa is defined in Font Awesome as this:
@fa-css-prefix:       fa;
then the less won't compile, because it doesn't recognize .fa. So I tried this instead:
@import "font-awesome/font-awesome.less"

.icon-application-home{
    .@{fa-css-prefix} .@{fa-css-prefix}-home;
}
However that is not working either. Is there any workaround? What can I do here?

EDIT

I found half an answer here:

Missing Font-Awesome.less variables in my .less file after importing

This works (partly) if I do the following:
@import (less) "../font-awesome.css";

.icon-home {
    .fa;
}
However, I noticed that .fa-home does not exist... only .fa-home:before... so I tried this:
@import (less) "../font-awesome.css";

.icon-home {
    .fa;
    .fa-home:before;
}
and
@import (less) "../font-awesome.css";

    .icon-home {
        .fa;
    }
    .icon-home:before {
        .fa-home:before;
    }
neither of these work. Any ideas?
解决方案
Assuming you use WE2012 that includes Less 1.4.2 the simplest solution would be:
@import (less) "../font-awesome.css";

.icon-application-home {
    &:extend(.fa, .fa-home all);
}
Or:
@import (less) "../font-awesome.css";

.icon-application-home
    :extend(.fa, .fa-home all) {

}   
Read extend documentation for details on how this stuff works. 



If you upgrade to an IDE/Compiler incorporating Less 1.6.x you will be able to do:
@import ".../font-awesome.less"

.icon-application-home {
    .fa;
    &:before {content: @fa-var-home}
}
There you still can't use .fa-home or .fa-home:before as mixins since the first is not defined and the second is not valid mixin selector, fortunately &:before {content: @fa-var-home} is just what .fa-home does.
In general though, the extend based solution is more optimal since it produces more compact CSS. 

                        
这篇关于LESS：使用变量的继承的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！