Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
styles
Advanced tools
Readme
Compile your LESS stylesheets using underscore and JSON.
The project is current and under active development. We welcome contributions!
Table of Contents
This plugin requires Grunt ~0.4.0
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install assemble-styles --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('assemble-styles');
This plugin was designed to work with Grunt 0.4.x. If you're still using grunt v0.3.x it's strongly recommended that you upgrade, but in case you can't please use v0.3.2.
Run this task with the grunt styles
command.
Task targets, files and options may be specified according to the grunt Configuring tasks guide.
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.less
and mixins.less
, 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|Array
Default: Directory of input file.
Specifies directories to scan for @import
directives when parsing. Default value is the directory of the source, which is probably what you want. 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";
@import "path/to/my/less/files/bootstrap.less";
@import "path/to/my/custom/less/files/somewhere/else/custom.less";
you can do this:
@import "mixins.less";
@import "bootstrap.less";
@import "custom.less";
Type: Boolean
Default: False
Compress output 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: String
Default: false
Configures -sass-debug-info support.
Accepts following values: comments
, mediaquery
, all
.
In your project's Gruntfile, add a section named styles
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
styles: {
options: {},
files: {
'path/to/result.css': ['path/to/source.less']
}
}
})
In this example, the paths
and requires
options are used:
styles: {
development: {
options: {
paths: ['src/less/files/'],
requires: [
'src/less/variables.less',
'src/less/mixins.less'
]
},
files: {
'dest/compiled.css': ['src/source.less']
}
},
production: {
options: {
paths: ['assets/css'],
yuicompress: true
},
files: {
'dest/compiled.css': ['src/less/source.less']
}
}
}
Pick and choose which Bootstrap components you want to "bundle" or exclude.
A common (unjustified) complaint about Bootstrap is that it's bloated or has too many "extras", which really means: "it's too much work to comment out or remove the @import statements I'm not using".
Well, lazy people rejoice! Because assemble-styles
makes it easier than squeeze cheeze to customize Bootstrap.
(See bootstrap.json
).
styles: {
// Global task options. These can also be set for each target.
options: {
paths: ['<%= bootstrap.base %>'],
requires: '<%= bootstrap.less.globals %>'
},
// Compile bootstrap.less
bootstrap: {
src: '<%= bootstrap.lib %>',
dest: 'examples/css/bootstrap.css'
},
// Compile LESS "bundles" specified in ./examples/bootstrap.json
core: {
src: '<%= bootstrap.less.core %>',
dest: 'examples/css/core.css'
},
common: {
src: '<%= bootstrap.less.common %>',
dest: 'examples/css/common.css'
},
nav: {
src: '<%= bootstrap.less.nav %>',
dest: 'examples/css/nav.css'
},
zindex: {
src: '<%= bootstrap.less.zindex %>',
dest: 'examples/css/zindex.css'
},
misc: {
src: '<%= bootstrap.less.misc %>',
dest: 'examples/css/misc.css'
},
utilities: {
src: '<%= bootstrap.less.util %>',
dest: 'examples/css/utilities.css'
},
// Compile a single component
single: {
options: {concat: false },
src: '<%= bootstrap.less.alerts %>',
dest: 'examples/css/single'
},
// Compile LESS files individually
individual: {
options: {
concat: false
},
src: '<%= bootstrap.less.all %>',
dest: 'examples/css/individual'
},
// Compile LESS files individually, using minimatch pattern
each: {
options: {
concat: false
},
src: ['examples/less/bootstrap/**/*.less'],
dest: 'examples/css/individual'
},
// bootstrap.less is ignored
ignored: {
options: {
concat: false
},
src: ['<%= bootstrap.less.core %>', '!examples/less/bootstrap/bootstrap.less'],
dest: 'examples/css/individual'
}
},
assemble-styles
is a gruntplugin for compiling LESS to CSS, but with a twist that you won't find in other similar plugins. This plugin makes it much easier to maintain libraries of LESS components and themes, by leveraging JSON and underscore templates to enable you to define LESS "packages" or "bundles" using external configuration files.
The plugin is quite simple to use, and it demonstrates good conventions for managing your LESS components. But the best part is that you can easily switch back and forth between:
The best part is that your LESS projects will be easier to maintain.
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.
assemble-styles
, and some of the documentation on this page, is derived from grunt-contrib-less, authored by Tyler Kellen. The plugin was modified to concat
LESS files first, and then compile them into CSS files. This allows for prepending globally required LESS files, and it also adds the ability to build out individual CSS files, rathers than building a single conctatenated file.
Task submitted by Brian Woodward
This file was generated on Fri March 8 2013.
FAQs
Compile your LESS stylesheets using JSON and underscore.
The npm package styles receives a total of 2,228 weekly downloads. As such, styles popularity was classified as popular.
We found that styles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.