Less: Unrecognized Input Error When Using Bootstrap

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



Leave a reply



Submit