I am trying to compile a LESS file to CSS. The same lines of code is compiling perfectly fine in online tools. Tried it in around 5 tools. But for the same thing it is breaking in my code.
I have a mixin which is using unit.
.mixinbgwcollleftmenu(#mixinbgwcollleftmenupt){
display: inline-block;
line-height: normal;
vertical-align: bottom;
width: 100%;
padding-top: unit(#mixinbgwcollleftmenupt, vh);}
When I use this, I am getting the error. Expected '}' but found 'i' on line 634 in file But when I try to remove that line of code, and just write it simply, the whole app is breaking, and I am getting the error in the picture.
Things I have tried.
The app was running dotless on visual studio, I uninstalled it. I tried compiling it on client side via the CDN, same error.
I removed the unit line of code, and hard coded it for testing. The special characters show up.
And when the special characters come up, I get a 500 error altogether.
I removed the line of code and the variable in the function altogether, and the same characters appear.
Related
I am using Visual Studio Code for a pure HTML, JavaScript and CSS project. I imported a CSS file from an old project that was provided to me by a colleague and a few of the lines in the CSS file are marked as having an error in VS Code, such as this one:
.some-class .some-sub-class {
padding-left: calc(~"50px + .75rem");
}
VS Code notes two errors here:
) expected (squiggly line under the tilde)
at-rule or selector expected (squiggly line under the closing bracket)
I was able to determine that both errors were caused by the tilde ~ character, since removing it suppresses the errors, but I need the tilde for those CSS rules.
The file is just a .css file if that's relevant, and simply closing it doesn't show any error anymore.
Is there an extension I should add, remove, or configure to make that error go away?
here are the extensions I have installed so far. The issue was happening before I installed any of them:
This is not valid CSS format, this seems to be LessCSS, which means you'd have to select proper filetype: Less.
While developing, despite live-reload and everything, I usually use DevTools to test the css code to apply.
Problem is, that the changes I apply are only temporary, and saving them directly to the original files with PostCSS and SASS is hard, add Angular2 and ShadowDom and I can't even find the css source file in the Source tab, figure saving in the original source scss file… Any way it would not be what I want, which is simply to log the changes I make, like for example:
p {
[…]
- font-size: 1rem;
+ font-size: 1.5rem;
[…]
}
li {
- color: #FFF;
+ color: #000;
}
Expecially thanks to the extremely annoying WebStorm's "feature" of automatically saving files every time you go out of its scope I can't tell how many times I found a solution in DevTools and then lost it when I forgot a single detail and I get mad trying to figure out what I did to manage to make it work. Also because the changes might have been applied to several elements, and I might forget to have changed one.
I tried to go through all the Chrome's extensions and I only find answers dated to 2012 suggesting to use DevTool's Source tab, that apparently doesn't even work with Angular2 and ShadowDom.
Anybody knows a solution?
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 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 am trying to get started with Compass/Sass on my Mac. After running sudo gem install compass, I have set up a project with a single main.scss file and I use compass watch to have the file automatically compiled to CSS.
main.scss looks like this:
#import "compass/css3/border-radius"
div .blah .baz {
#include border-radius(4px, 4px);
font-weight: bold;
}
Seems like nothing complicated, right? Well, every time I save the file, I get an error like this:
>>> Change detected to: /Users/mikl/Sites/ddk7/profiles/blaahval/themes/kaskelot/./scss/main.scss
error ./scss/main.scss (Line 3: Invalid CSS after ".../border-radius"": expected selector or at-rule, was "$blue: #3bbfce;")
overwrite ./css/main.css
Is there something wrong with my SCSS syntax, or just compass just have very poor error messages?
As #jnpcl said, a semi-colon would be good. However, if that was the issue it should throw an error directly related to that.
This seems like a stretch, but did you copy and paste that line? Perhaps there is character weirdness happening?