Missing Font-Awesome.Less Variables in My .Less File After Importing

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

Well, it is not allowed to invoke a mixin via variable like this: .@{fa-css-prefix};.
Invoking it via .fa is also currently impossible (by v1.5.1), but this is planned to be allowed in future LESS versions.

Currently the workaround is to import precompiled 'font-awesome' CSS files as LESS code and use their selectors as mixins the usual way, e.g.:

@import (less) "font-awesome.css";

.icon-chevron-up, 
.icon-chevron-down {
    .fa;
}

Or:

@import (less) "font-awesome.css";

.icon-chevron-up, 
.icon-chevron-down {
    &:extend(.fa);
}

For more details see:

• https://github.com/less/less.js/issues/1196
• https://github.com/less/less.js/issues/1399
• https://github.com/less/less.js/issues/1485
• etc.

---

Update, LESS 1.6.0: it is now possible to use FA interpolated selectors as mixins (but not :extend them), i.e.:

@import "font-awesome.less";

.icon-chevron-up, 
.icon-chevron-down {
    .fa;
}

font-awesome and less : icon classes unreconized

The only solution i found is to modify Font-awesome's less file icons.less.
I replaced

.@{fa-css-prefix}-home:before { content: @fa-var-home; }

with

.@{fa-css-prefix}-home { &:before { content: @fa-var-home; } }

LESS: Inheritance using a variable

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.

To apply semantic principles using Font-awesome and LESS?

I found that the better solution were to modify font-awesome/less/icons.less and rewrite the declarations according this pattern :

.@{fa-css-prefix}-home { &:before { content: @fa-var-home; } }

It is similar to the glyphicons.less used by Bootstrap.

PS : In Eclipse, this can be done quickly with the find/replace tool :

Find :

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before \{ content: @([-0-9a-zA-Z]+); \}

Replace :

.@{fa-css-prefix}-$1 { &:before { content: @$2; } }

and

Find :

\.@\{fa-css-prefix\}-([-0-9a-zA-Z]+):before,

Replace :

.@{fa-css-prefix}-$1,

LESS in Visual Studio 2015

I ran into a very similar error which brought me here.

In my case, the problem was that I was using an out-date version of the dotless compiler (http://www.dotlesscss.org/)

We had been using an older version of Font Awesome and after upgrading it would no longer compile to CSS due to that missing variable. The newest version (as of this posting) had corrected whatever was causing the compilation failure. After upgrading the version of dotless we used, the problem went away.

Even if you're not using dotless, might be worth determining which .less compiler you are using to see if a newer version is available.

You are importing a file ending in .less that cannot be found

After going through almost every single search result on google, i found
this:

Basically i need to set current working directory for dotless to be able to find @import files:

so all i had to do in C# was:

    string filePath = $"{_filePath}\\main.less";
    string less = ReadFile(filePath);
    var dotlessConfig = new dotless.Core.configuration.DotlessConfiguration();
    Directory.SetCurrentDirectory(_filePath);
    string css = Less.Parse(less,dotlessConfig);

Less doesn't work on compiled client-side

I think the differences in output you're seeing are due to these compilers using different versions of the LESS spec. Previous versions current versions of LESS (thanks @seven-phases-max) allow variables created in mixins to be used throughout the whole document ('global scope').

You've created the @colorx variable inside of a mixin. To make your code work in a compiler using version 1.4.x, you either need to set your @colorx variable outside the mixin, so it has global scope, or apply the colour to .text by using the mixin.

Here's an example demonstrating variable scope LESS in a compiler (currently) running an older compiler
So I guess you have a couple of options.

Option one, keeping using the old compiler and change your mixin to this:

.setColor(){
    @colorx:"yellow";
    color: @colorx;
}

.text {
    .steColor();
    font-size:20px;
}

Or, drop set colour all together, and declare the @colorx:"yellow"; variable in the body of your less file.

Or lastly, as @seven-phases-max has pointed out, your code works in the current versions of the compiler, so you could switch to a more up-to-date compiler and use your code as-is.

LESS compile error

Most frustrating thing about LESS is its less than helpful debug information.

It was a simple missing semicolon on line 57

    a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-family: @baseFontFamily    //missing semicolon
        font-size: 1.5em;
        color: @gray85;
        font-weight: 300;
        text-decoration: none;
        text-transform: uppercase;
        border-bottom: solid 1px @gray50;
    }
}

The corrected code worked fine

    a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        font-family: @baseFontFamily;
        font-size: 1.5em;
        color: @gray85;
        font-weight: 300;
        text-decoration: none;
        text-transform: uppercase;
        border-bottom: solid 1px @gray50;
    }
}

Font Awesome loading as boxes with less.js and webpack

Everything got fixed when I changed index.tsx to import '@fortawesome/fontawesome-free/js/all.js'

---

Related Topics