Less compilation

1

i am using new structure of meteor project and i am having issue with less files in /imports/ui/stylesheets/board.wrapper

my code is

@winheight:`window.screen.height`;

.game-board-wrapper {
  @media only screen {
    @media (max-width: 600px) {
      width: 100%;
      height: calc(100% - 200px);
      background-color: #3d5afe;
    }

    @media (min-width: 601px) {
      width: 500px;
      height: 500px;
      margin: 0 auto;
      background-color: #3d5afe;
      position: fixed;
      left: calc(@winheight - 500 / 2);
    }
  }
}

less compiler says

While processing files with less (for target web.browser):
imports/ui/stylesheets/board.less:1:11: JavaScript evaluation error:
‘ReferenceError: window is not defined’

i tried this less code on online less compiler then it successfully compiled to css.

what should be he problem in project code ??

2

try the code here http://less2css.org/ it runs successfully.

3

LESS in Meteor by default is a preprocessor, but window.screen.height is a runtime variable in JavaScript. If you want to use a variable like that, you’ll need to use LESS at runtime, which is generally discouraged. Probably you’d want to put the LESS files in public, and then use some script to load them client side when the app starts up.