ParseError:Unrecognised input in less while creating custom less file

Question

I'm trying to play around on bootstrap 3. I would like to create a custom less file (say custom_img.less) and import it to bootstrap.less. However, when I tried to compile the less to css, I got the error ParseError: UNrecognize input in xxxx. Please see the code below.

custom_img.less

.img-custom {
  @media (min-width: @grid-float-breakpoint) {
    width: 50%*@grid-float-breakpoint;
    height: 50%@grid-float-breakpoint;
  }
}

Importing it in bootstrap.less

@import "wells.less";
@import "close.less";
@import "custom_img.less";

The error is this- ParseError: Unrecognised input in XXXXX in

.img-custom {

What is wrong/missing? do I need to import something?

Thank you in advance.

Answer 1

In your post you don't mention importing variables.less in bootstrap.less which defines @grid-float-breakpoint

.img-custom {
  @media (min-width: @grid-float-breakpoint) {
    width: 0.5*@grid-float-breakpoint;
    height: 0.5*@grid-float-breakpoint;
  }
}

compiles into:

 @media (min-width: 768px) {
      .img-custom {
        width: 384px;
        height: 384px;
      }
    }

NOTE 50%*@grid-float-breakpoint; gives 38400% and 50%@grid-float-breakpoint; compile into 50% 768px

update

why is that other bootstrap component does not have to import variable.less? like nav.less

I don't think its true, nav.less don't have to import variables.less. LESS throws an error and stop compiling if a variable or mixins is undefined. Also nav.less contains variables like @border-radius-base. Bootstrap's LESS files are intend to compile as lessc bootstrap.less bootstrap.less import required files s.a. variables.less and mixins.less. Of course you can comment out some components in bootstrap.less. Also see: Bootstrap & LESS: importing mixins only as reference