Files
meteor/packages/less
David Greenspan ca9b8f571f Version bumps
Tried to get everything to an rc.0 of the very latest version,
which required some research in some cases about the published
versions.  For example, some packages had version histories like:

```
...
  1.0.3-winr.2               January 20th, 2015
  1.0.3-winr.3               February 24th, 2015   installed
  1.0.3                      March 17th, 2015      installed
  1.0.4-anubhav.0            August 6th, 2015
  1.0.4-plugins.0            July 22nd, 2015
  1.0.5-galaxy.0             July 17th, 2015
```

In this case, I would bump the version from `1.0.4-plugins.0`
to `1.0.5-rc.0`, skipping `1.0.4`.
2015-08-10 22:10:52 -07:00
..
2015-08-10 22:10:52 -07:00
2015-07-17 22:52:54 -07:00

Less

The Less package provides a compiler build plugin for the Meteor build tool. It handles the compilation of *.less files to CSS.

Usage

If you want to use it in your app, just run:

meteor add less

If you want to use it for your package, add it in your package control file's onUse block:

Package.onUse(function (api) {
  ...
  api.use('less');
  ...
});

File types

There are two different types of files recognized by this package:

  • Less sources (all *.less files that are not imports)
  • Less imports:
    • files with the import.less extension: *.import.less
    • files in an imports directory: **/imports/**/*.less
    • marked as isImport: true in the package's package.js file: api.addFiles('x.less', 'client', {isImport: true})

The source files are compiled automatically. The imports are not loaded by themselves; you need to import them from one of the source files to use them.

The imports are intended to keep shared mixins and variables for your project, or to allow your package to provide several components which your package's users can opt into one by one.

Each compiled source file produces a separate CSS file. (The standard-minifiers package merges them into one file afterwards.)

Importing

You can use the regular @import syntax to import any Less files: sources or imports.

Besides the usual way of importing files based on the relative path in the same package (or app), you can also import files from other packages or apps with the following syntax.

Importing styles from a different package:

@import "{my-package:pretty-buttons}/buttons/styles.import.less"

.my-button {
  // use the styles imported from a package
  .pretty-button;
}

Importing styles from the target app:

@import "{}/client/styles/imports/colors.less"

.my-nav {
  // use a color from the app style pallete
  background-color: @primary-branding-color;
}

Importing styles relative to the current package/app's root:

@import "/path/to/style.import.less";