LESS: Unrecognized input error when using Bootstrap
After digging for a while, I found that the error was coming from the mixin.less
file where the #grid
stuff was getting defined.
This is what the file had originally:
(~".span@{index}") { .span(@index); }
After reading the LESS change log, I found that they changed the syntax so you can now use variables directly without needing the ~ hack. So I changed my mixin.less
to look like this:
.span@{index} { .span(@index); }
There are a couple of other lines that you need to change, but they all follow the same format.
(~".offset@{index}") { .offset(@index); }
changes to → .offset@{index} { .offset(@index); }
Less::Error at / Unrecognised input - twitter-bootstrap-rails
I never got to the bottom of this issues, but as I didn't require access to the bootstrap mixins I reinstalled twitter-bootstrap-rails but ran the static stylesheets generator, so I wasn't using Less anymore.
rails generate bootstrap:install static
Less unrecognized input
Make baseMessageColor
just a color, and use
text-shadow: 2px 2px 4px @basemessageColor;
(-webkit-text-shadow
hasn’t been necessary for quite a while, by the way.)
LESS: Unrecognised input
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.
Parse Error while using Less CSS returns Unrecognised input error message with background properties?
You seem to be having an invalid value for the background-clip
property and it is causing less compiler to throw an error.
background-clip
supports only border-box
or content-box
or padding-box
or inherit
as values.
For example, the below code compiles fine.
.sample{
background: url(css/img/home-bg3.jpg) no-repeat;
background-clip: content-box;
background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
background-size: 100% cover;
}
background-clip - MDN Specification
Additional Note:
The error is actually thrown because of a missing value indicated in the area below:
background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
/*--------------^*/
The below would compile fine but wouldn't have any effect because the value is not supported by background-clip
property as per specifications.
background-clip: linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
LESS: Unrecognised input @import ...
Use semi-colon after @import
@import "../lib/bootstrap/less/bootstrap";
Related Topics
Webkit Backface Visibility Not Working
How to Specify an Element After Which to Wrap in CSS Flexbox
How to Make CSS A:Active Work After the Click
Background-Size in Shorthand Background Property (Css3)
How to Reset a CSS-Counter to the Start-Attribute of the Given List
Is the :Before Pseudo-Element Allowed on an Input[Type=Checkbox]
Print Styles: How to Ensure Image Doesn't Span a Page Break
How to Determine If CSS Has Been Loaded
Comma in CSS, Multiple Selectors Using the Same CSS
IE6/IE7 CSS Border on Select Element
Using Font Awesome Icon for Bullet Points, with a Single List Item Element
Twitter Bootstrap 3 - Panels of Equal Height in a Fluid Row
Continuous CSS Rotation Animation on Hover, Animated Back to 0Deg on Hover Out