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>.
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 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.
I am using Web Essentials 2013 in a project to compile less to css on build/save. However, I am having problems with that when compiling, WE is tampering the relative paths to fonts/images etc.
For example:
.footer {
background: url('../img/footer_background.svg') no-repeat top center;
}
becomes:
.footer {
background: url('img/footer_background.svg') no-repeat top center;
}
I recall having a simillar issue before, but settings "Adjust relative paths" to false in web essentials CSS options fixed it then. It doesn't seem to do it now. I have tried both the latest stable and the latest nightly, both giving same behavior.
Any suggestions? :)
I know you mentioned 2013, but I had this same problem in 2015 and found if I set "relativeUrls": false in compilerconfig.json.defaults then the mentioned issue stops. For reference I'm using VS 2015 Pro upd2 and Web Compiler extension v1.11.315.
mlhDev's answer is close, but I actually had to change this in the compilerconfig.json file, NOT the defaults file, per the project's GitHub issue. My config looks like:
[
{
"outputFile": "StyleSheets/something.css",
"inputFile": "StyleSheets/scss/something.scss",
"options": {
"relativeUrls": false
}
}
]
I'm using Visual Studio Enterprise 2015 for reference, but should work in other versions.
I've run into this as well. It used to a problem in earlier versions of Web Essentials, but was eventually fixed. Now it seems to have cropped back up in 2013.
One way that I've seen to fix this is to escape the url path, which causes the less compiler to treat the value as a string literal, which it passes through as-is without touching it.
ex:
background-image: ~"url('../../../img/foo.png')";
will emit as:
background-image: url('../../../img/foo.png');
In case anyone still runs into this, in your bundleconfig.json add the adjustRelativePaths key to the minification options as follows:
"minify": {
"enabled": true,
"adjustRelativePaths": false
}
This key is used in the BundleHandler static class here, look at the method AdjustRelativePaths.
I use Web Essentials for LESS as well, and while I haven't seen it do this, I have a better solution for you. Rather than writing paths out in your code, especially if all you're changing is just the file name at the end, try using a variable for your paths.
Example:
#imgURL: "../img";
Then to use it, all you need is:
.footer{
background: url("#{imgURL}/footer_background.svg");
}
I am experiencing this same issue with bootstrap, which uses relative paths for fonts. I believe the issue lies with node-sass or libsass.
I have been unable to find information about relative path rewrites in either library, however. If it can be fixed, then a fix might be to drop in a new node-sass version.
Unfortunately, I can't find where WebEssentials is installed on my system to test this out.
I just realized you are having issues with the LESS compiler, not SASS. I wonder if the issue has more to do with the CSS minifier now.
I changed my "Custom output directory" to "../" which is where I want it to write. This causes the rewrite. If I leave it empty, the relative paths are left alone.
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.
I started using LESS today. But it's kinda weird. This code does not work. I get an error:
! Variable Name Error: #linkColor in a is undefined.
My bootstrap:
#import "variables.less";
#import "normalize.less";
variables.less:
#linkColor: #08c;
#linkColorHover: darken(#linkColor, 15%);
normalize.less:
a {
color: #linkColor;
}
a:visited {
color: #linkColor;
}
a:hover {
color: #linkColorHover;
}
When I make an
#import "variables.less"
in the normalize.less file, everything works fine.
Thanks for your help :)
This other question ultimately led me to the right answer.
It looks like the LESS compiler is silently failing if files are encoded with a BOM. (That's a Byte Order Mark for those not familiar with the term.) This is the default setting in some editors, such as Visual Studio.
The compiler barfs up an error on the BOM if it's in your root file, but seems to fail silently for #import-ed files.
Try saving your files as UTF-8 without a BOM, and see if that solves your problem.
This error can also occur via bad imports in the files you're importing.
I also encountered this issue, when using multiple layers of import, and the 'lessc' compiler from Node.js:
The original file imported a file (which we will call 'child')
The child file imported a file (which we will call 'grandchild')
The grandchild was imported
I attempted to compile the original file, and received the same 'undefined variable' behavior. I could see the variable was defined in the child and the syntax lookedcorrect.
No prior errors were displayed.
The problem turned out that the child was not importing the grandchild properly. Ie,
#import grandchild.less
rather than:
#import "grandchild.less";
Fixing the child importing the grandchild made the original see the variables defined in the child.
This seems like a bug in less - ie, the bad import should show up in the 'lessc' output, so one day it will probably be fixed. Until then, I hope this helps.
There may be another possible root cause.
Here is my original Gruntfile.js:
less: {
compile: {
files: {
'css/less.css': 'less/**/*.less'
}
}
},
The wildcard makes LESS compiler compile all .less files under that folder and merge all results into one CSS. And I got errors running grunt less:compile:
NameError: .transition is undefined in less/core/html.less on line 38, column 3
Once I changed 'less/**/*.less' into 'less/css.less', the compilation succeeds.
I encountered the same problem using Winless compiler.
Some of the .less files i was importing into master.less were empty. when i removed these from the list of imported files my variables were recognized!
To help any others that may come across this not want duplicate CSS generated from multiple imports, you have two options.
Either #import-once the variables / mixins files you need in each file you need to use them in.
Use #import-once "filename.less"; to prevent duplicates.
Upgrade to LESS > 1.4.0, when it arrives; From the less website:
"The statement #import acts differently before and after 1.4.0. It acts as #import-multiple in all older versions and as #import-once in all less.js versions after 1.4.0."
You can also get this error if you are trying to import the file twice (not a good idea) and the first import is before your variables referenced in your.less file have been loaded
Note: I'm using django compress
in index.html i had:
{% compress css %}
<link href="{{ STATIC_URL }}less/timepicker.less" rel="stylesheet" type="text/less">
<link href="{{ STATIC_URL }}less/style.less" rel="stylesheet" type="text/less">
{% endcompress %}
then in styles.less i had
...
#import "timepick.less";
I think it is because of which master less file you are compiling. Likewise
If you have Less/Project_name/project.less and in this project.less you import the variable less and all the other files which has in the directory.
You just have to compile project.less into your css, not all less files. If you try to compile project.less and variables.less at a time you will have this error. And you can avoid redundant declaration of importing the variable less files
I would use the nested rules in the normalize.less :
a {
color: #linkColor;
&:visited {color: #linkColor;}
&:hover {color: #linkColorHover;}
}
And in the #import, you don't need to use the ".less", it's optional :
#import "variables";
#import "normalize";
I don't know if this can help...
One other weirdly specific situation in which this occurs: if you're using .NET and dotless, the compiler will choke on nested media queries with variable specifiers. If you have code like this:
#media (min-width: #aVariable) {
.some-class{
margin: 10px;
#media (min-width: #anotherVariable) {
margin: 20px;
}
}
... then dotless will tell you that it can't find the definition for #anotherVariable, even if it's used three lines above.
For me its happened when using #Import-once and nothing help.
but with #Import its worked.
as i read in the last version of the Less the Import will work as Import-once.