I have downloaded and imported the font-awesome in my MVC project. I am using the .less files for styling.
I have a different less file for styles which runs fine but for some reason the font-awesome less file is not working, it gives the following error:
variable #fa-font-size-base is undefined on line 6 in file 'core.less':
[5]: display: inline-block;
[6]: font: normal normal normal #fa-font-size-base/#fa-line-height-base FontAwesome; // shortening font declaration
-----------------------------^
[7]: font-size: inherit; // can't have font-size inherit on line above, so need to override
I am not importing any file in the other less files, but seems like font-awesome has a bunch of imports. Can anyone help?
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.
Related
I have an issue with the Live Sass compiler in VS Code, namely when working with lists. None of the usual operations work. In the following example, it's list.nth(list,index).
The following works fine in a Codepen:
HTML
<p>red</p>
<p>blue</p>
<p>green</p>
SCSS
#use "sass:list";
p {
font-size: 25x;
font-weight: bold;
}
$colors: red blue green;
#for $n from 1 through 3 {
p:nth-child(#{$n}) {
color: list.nth($colors,$n);
}
}
This also works fine when compiling it locally with the Dart Sass CLI.
But when I try to compile this with the Live Sass compiler in VS Code, I get the following error:
Compilation Error
Error: Invalid CSS after "... color: list": expected expression (e.g. 1px, bold), was ".nth($colors, $n);"
Why is that?
Use Live Sass Compiler by Glenn Marks
I had exactly the same problem. You read the SASS official website, follow the instructions, write the code in Visual Studio Code, and then you get this strange Compilation Error when saving the SASS or SCSS file. You double-check everything and it seems like it should work, but it doesn't.
Well, the problem is caused by the Visual Studio Code extension you are using for compiling SASS or SCSS files to CSS files.
Don't use this extension: Live Sass Compiler by Ritwick Dey
You are probably using this extension: Live Sass Compiler by Ritwick Dey. It's widely used, but is no longer supported by the author. Consequently, the SASS version isn't updated. This extension produces the error you are describing.
Use this extension: Live Sass Compiler by Glenn Marks
You should use this extension: Live Sass Compiler by Glenn Marks. As the author states: A big thank you to #ritwickdey for all his work. However, as they are no longer maintaining the original work, I have released my own which has been built upon it. This extension compiles your SASS or SCSS files to CSS files successfully.
The extension you are using does not seem to be maintained anymore, you can try to use this one instead.
I'm trying to style a link and following BEM principles but I get an error from the sass compiler. here's the html
Link with icon
and here is the sass stuff:
.sg-link {
color: #111;
text-decoration: none;
&-icon {
&:before {
margin-right: 10px;
}
}
&:hover{
color: $maggie;
}
}
Now when sass watch compiles I get this error in the terminal:
error source/scss/atoms/_02-links.scss (Line 7: Invalid CSS after " &": expected "{", was "-icon {"
"-icon" may only be used at the beginning of a compound selector.)
I've used this technique before and always worked so I thought that maybe the sass version has something to do with it. I'm using Sass 3.2.13 (Media Mark). So I checked on sass website and latest version should be Sass 3.4.13 (Selective Steve) but when I try to update with gem update sass it says nothing to update. Tried with sudo too but no luck. Ideas?
EDIT: I've just checked the same code on Sassmeister and it works fine
Thanks in advance
You are correct about the Sass version. Using Sassmeister, you can see that your snippet compiles at Sass v3.4.x, but not at 3.2.x (you can configure the Sass version in the control panel, under the cog icon menu).
As for why you are having trouble updating Sass in your environment is probably beyond the scope of this question, but it could be that your system's version of Ruby/gem is outdated. You might consider a Ruby version management tool like rbenv or chruby for more fine-tuned control over which versions of gems are installed. I suspect that installing rbenv (for example), using it to install the latest version of Ruby, and then installing Sass with gem from there would solve your issue.
(Disclaimer: I'm not super experienced with Ruby, but I've found a setup like the one described above to work well for me.)
So I have a web app that uses less to generate css and i recently upgraded from lessc 1.75 to lessc 2.2.0.
In doing so, I see that lessc has some optimizations like replacing hex colors with actual color names.
Unfortunately for me, I see that the main.css that gets generated now is removing a bunch of styles that I think ACE needs.
Specifically, the entire tables.less seems to be completely excluded now
despite being imported from the ace.less via:
#import "tables.less";
I see no errors so I am not sure what is going on. Thoughts anyone?
I'm trying to learn less with the help of Web Essentials 2012.
Right from the start, this LESS code:
#main-color: red;
.mega-warning {
font-size: 24px;
color: #main-color;
}
is giving a compile error "LESS: Unrecognised input" and the compilation stops. When i declare the variable #main-color inside the .mega-warning class scope everything works:
.mega-warning {
#main-color: red;
font-size: 24px;
color: #main-color;
}
What am i missing?
I'm struggling with the very same issue. Looks like Web Essentials 2012 v2.9 for some reason is not very happy about *.less files starting with variable declaration. Here is my workaround:
html{}
#main-color: red;
.mega-warning {
font-size: 24px;
color: #main-color;
}
Strangely enough things work absolutely fine when using standalone lessc 1.4.2 compiler (which is included in WE2012 2.9 as per changelog). I've sent an email to the author of Web Essentials extensions and posted him a link to this question, so hopefully he'll address it pretty soon.
Save less files with encoding "UTF-8 without BOM". This approach was proposed in the post
VS 2012 Web Essentials Less Compile Error
I had this issue in VS / Web Essentials 2013. My fix was to recreate the .less file using a template. I had originally just changed the extension from .css to .less, but apparently that doesn't work. So use the Visual Studio template for a .less file instead.
I'm not positive where that .less template came from though, it might have come with Web Essentials, or it may have come in the SideWaffle template pack.
Try this Where you have added reference to less file:
rel="stylesheet/less"
With this your reference will look like
<link rel="stylesheet/less" type="text/css" href="styles.less" />
Download less.js and add the <script> tag referencing it in the <head>. The css <link> should come before the <script>.
I am trying to do some customisation on my existing bootstrap less file by importing import my own less file into existing bootstrap.less.
I thought it would be simple, however I've spend painful couple hours already to try to make new less compiled.
every time I add my file in I got:
ParseError: Syntax Error on line 1 in C:\xxx\content\bootst
rap\less\xxx.form.less:9:999 8 }
My own less file:
.form-unit {
background-color: #F5F5F5;
border-radius: 6px 6px 6px 6px;
margin-bottom: 30px;
padding: 10px;
min-height: 170px;
position:relative;
}
Anyone have same problems? what did i missed???
I compiled it online not surprisingly it works, I am so confused
Are you using SimpLESS as your LESS compiler? If so there's a bug where it can't read files encoded in UTF-8 with BOM. Just convert your file to UTF-8 without BOM and it will work.
To anyone using Visual Studio and continuing to tear their hair out with the problem above (I've been in the same boat for the last hour or so, and the approved answer above didn't work for me), I'd recommend getting hold of the Web Essentials extension.
It allows for instant compilation of LESS files into minified CSS whenever they are saved in much the same way as SimpLESS does. No complaints about encoding, line endings or anything else!
For all .less files used in Visual Studio, you need to change the UTF encoding....
File > Advanced Save Options...
Set "Encoding" to "Unicode (UTF-8 without signature) - codepage 65001
Once you do this, the Simpless compiler will work for your files.
If you are using Visual Studio, make sure that you didn't accidentally add the included file to the compile list. Check compilerconfig.json and make sure you aren't trying to compile both the main SASS file and the included one.