less-tests

LESS CSS test-suite. Run any kind of test on LESS stylesheets.

less-tests v0.1.0

LESS CSS test-suite. Run any kind of test on LESS stylesheets.

Table of Contents

Three quick start options are available:

Inside the project folder run npm install to install the required dependencies.

Run this task with the grunt less-tests command.

In your project's Gruntfile, the less-tests task is already configured with a number of build targets. This is for convenience to show you how to create your own tests:

grunt.initConfig({
  // This is a task 
  styles: {
    options: {
      // Task-specific options go here. 
    },
    // This is a target 
    example: {
      options: {
        // Target-specific options go here. 
      },
      files: {
        'dest/files': ['source/files/*.*']
      }
    }
  },
  jshint: {
    ...
  }
});
grunt.loadNpmTasks('styles');
 
grunt.registerTask('default', [
  'jshint', 
  'styles'
]);

Task targets, files and options may be specified according to the grunt Configuring tasks guide.

.less source files.

TBC...

.css files.

TBC...

Actual compiled .css files.

TBC...

These options will be passed through directly to [Less.js][]. See the Less.js documentation for a list of supported options.

Type: String|Array Default: Directory of input files

Specifies directories to scan for @import directives when parsing. The default value is the directory of the specified source files. In other words, the paths option allows you to specify paths for your @import statements in the styles task, as an alternative to specifying a path on every @import statement that appears throughout your LESS files. So instead of doing this:

@import "path/to/my/less/files/mixins/mixins.less";

you can do this:

@import "mixins.less";

Type: Boolean Default: false

Specifies if we should compress the compiled css by removing some whitespaces.

Type: Boolean Default: false

Compress output using cssmin.js.

Type: Integer Default: null

Set the parser's optimization level. The lower the number, the less nodes it will create in the tree. This could matter for debugging, or if you want to access the individual nodes in the tree.

Type: Boolean Default: false

Force evaluation of imports.

Type: Boolean Default: true

Force operations to be enclosed within parenthesis, (2 / 6).

Type: Boolean Default: true

Force strict evaluation of units. If set to false the compiler will not throw an error with operations such as (3 * 1em).

Type: String Default: false

Configures -sass-debug-info support.

Accepts following values: comments, mediaquery, all.

Type: String|Array Default: empty string

Specified files will be prepended to the beginning of src files, not to the concatenated output. This feature is useful for "inlining" globaly-required LESS files, such as variables or mixins, so that they do not need to be referenced with @import statements inside any individual files.

Type: Boolean Default: true

Concatenate all source files by default. If you change the value to false, all source files will compile into individual files.

Type: String Default value: null

If this filename is specified, options defined therein will be used.

styles: {
  options: grunt.file.readJSON('.lessrc')
}

The .lessrc file must be valid JSON and looks something like this:

{
  "require": null,
  "concat": false,
  "compress": false,
  "yuicompress": false,
  "optimization": 3,
  "strictImports": true,
  "dumpLineNumbers": false,
  "strictMaths": false,
  "strictUnits": false
}

Type: Boolean

Make Upstage library available and loads project configuration.

Type: Object Default: null

Data object for defining global variables inside the Gruntfile which will be accessible in LESS files. Templates can be used to


styles: {
  selectors_test: {
    files: {
      'selectors.css': ['selectors.less']
    }
  }
}

As an alternative to using @import to "inline" .less files, you can specify an array of src paths and they will be concatenated.

styles: {
  dist: {
    files: {
      'test.css': ['reset.less', 'test.less']
    }
  }
}

You can specify multiple destination: [source] items in files.

styles: {
  dist: {
    files: {
      'test.css': ['test.less'],
      'mixins.css': ['mixins.less']
    }
  }
}

In this example, the paths and requires options are used:

styles: {
  development: {
    options: {
      paths: ['test/fixtures'],
      require: [
        'globals/variables.less',
        'globals/mixins.less'
      ]
    },
    files: {
      'styles.css': ['styles.less']
    }
  },
  production: {
    options: {
      paths: ['assets/less'],
      yuicompress: true
    },
    files: {
      'styles.min.css': ['styles.less']
    }
  }
}

Grunt supports filename expansion (also know as globbing) via the built-in node-glob and minimatch libraries. So Templates may be used in filepaths or glob patterns.

debug: {
  options: {
    paths:   ['<%= less.debug.import %>']
  },
  src:  ['<%= less.test.imports %>', 'test/fixtures/*.less'],
  dest: 'test/result/debug'
}

For more on glob pattern syntax, see the node-glob and minimatch documentation.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.

Jon Schlinkert

Brian Woodward

This project uses the extremely flexible assemble-styles Grunt plugin for compiling LESS to CSS. The styles plugin leverages JSON and underscore for defining any number of LESS "bundles", UI components, compressed stylesheets or themes.

Visit assemble-styles for more information.

  • 2013-03-13 v0.1.1 Setup Grunt, nodeunit, first basic tests using fixtures from Less.js.
  • 2013-03-12 v0.1.0 First commit.

  • Add assertions.
  • More user-friendly tests, semantic classes to help new LESS users follow what's happening.
  • Comparison tests.
  • Multiple versions of Less.js.

Authored by Jon Schlinkert

This file was generated on Thu Mar 14 2013 05:28:40.