Component-specific Styling (and theming) with LESS and Gruntjs

Gruntfile.js

		build: {
			options: {
				paths: [ // Where to look for files to @import
					"app/styles/"
				]
			},
			files: [
			// @see http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
				{
					expand: true,				// Enable dynamic expansion.
					cwd: 'app/components/',		// Src matches are relative to this path.
					dest: 'app/components/',	// Destination path prefix.
					src: ['**/styles/*.less'],	// Actual pattern(s) to match.
					ext: '.css'					// Dest filepaths will have this extension.
				},
				{
					expand: true,
					cwd: 'app/layouts/',
					dest: 'app/layouts/',
					src: ['**/styles/*.less'],
					ext: '.css'
				},
				{
					"app/styles/main.css": "app/styles/main.less"
				}
			]
		}
	},

notification.less

@import 'variables.less';

.notification {
	text-align: center;

	.box-icon {
		padding: 1em;
		background-color: darken(@grey, 50%);
		color: #fff;
		border-radius: @default-border-radius;
		display: inline-block;
		font-size: 20px;
	}

	.notification-text {
		background-color: #fff;
		margin-top: 10px;
		font-weight: 700;
	}
}

theme.less

// Main theme colors
// --------------------------------------------------
@primary-color: #428bca;
@chrome-color:  #E2E2E2;
@text-color-default: #333;


// Grey shades
// --------------------------------------------------
@very-light-grey: #A0A0A0;
@light-grey: #707070;
@grey: #DFDFDF;

// Type
// --------------------------------------------------
@font-family-default: "Helvetica Neue", Helvetica, sans-serif;
@font-size-default: 18px;
@font-weight: 500;
@font-weight-light: 400;
@line-height-default: 21px;

variables.less

// Make Bootstrap variables available to our components
@import "../lib/bower_components/bootstrap/less/variables.less";

// Make theme variables available to our components
@import "theme.less";

@fa-font-path: "/lib/bower_components/fontawesome/fonts";
@fa-css-prefix: icon;

// The height of the header navigation bar
@nav-height : 44px;

// The standard duration of CSS transitions
@transition-duration : 0.3s;

@default-border-radius: 5px;