We're moving away from using the implicit colors module on the String.prototype (eg 'string'.green) at it clutters the prototype for everyone and is generally magic and bad.

Use chalk explicitly instead (example).

I wanna use semantic-ui for my project. I've copy the less files in the semanticfolder and I have my less where I customize the theme. My src/assets folder looks like this :

- images
- less
  - main.less
- semantic
  - definitions
  - themes
  - semantic.less
  - theme.config
  - theme.less

My gruntFile.js for the less module looks like this :

less: {
  development: {
    files: {
      '<%= config.assets %>/css/main.css' : '<%= config.assets %>/less/main.less',
    }
  }
}

Am I missing something here ?

Refactor the bulk of the logic into a library that can take a configuration object and build the less files.

Then the logic can be used in other libraries and plugins instead of only having it in assemble-less.

Hi,
I try to use this plugin for a project, I run the task with grunt less but i have the error "Warning: Task "less" not found. Use --force to continue.". grunt-contrib-less work perfectly but i need @import options. Can you help me ?

My grunt task is :

less: {
    options: {
        paths: 'assets/css',
        imports: {
            less: ['normalize.css']
        }
    },
    files: {
        src:'<%= meta.files.less %>/base.less',
        dest: '<%= meta.files.destAssets %>/css/base.css'
    }
}

Thanks for all and sorry for my bad english.

Hi,

I updated from (i think) .5 to .7 and imports > reference stopped working

        less: {
            prod: {
                options: {
                    paths: styleLocation,
                    imports: {
                        reference: ["mixins.less", "variables.less", "images.less"]
                    },
                    syncImport: true
                },
                files: [{
                    expand: true,
                    cwd: styleLocation,
                    src: ["**/*.less", "!container.less", "!variables.less", "!mixins.less", "!**/external/*.less"],
                    dest: styleLocation + "/temp",
                    ext: ".css"
                }]
            }
        },

I have changed imports > less to imports > reference. But it wont compile because it can't find mixins in mixins.less.

Any ideas? Any way I can get more information on what is happening?

As documentation states the globalVars option prepend variables to the files. But i geting a parse error. The only file i use in assemble-less configuration is main.less that imports a variables.less where i use a template-directory-uri variable that i want to define in assemble-less config. This config is current like this:

less: {
            development: {
                files: {
                    'build/assets/main.css': 'less/main.less'
                },

                options: {
                    globalVars: {
                        'template-directory-uri': 'DEVELOPMENT URI'
                    }
                }
            },

            production: {
                files: {
                    'dist/assets/main.css': less/main.less'
                },

                options: {
                    globalVars: {
                        'template-directory-uri': 'PRODUCTION URI'
                    }
                }
            }
        },

and in the variable.less that is included i have:

@icon-font-path: "@{template-directory-uri}/assets/";

By the way, it would be nice if the process option was applied to every imported less files instead of just the files listed in files item. What do u think about it?

Currently the process option does not do anything.
The only lines I found which had something to do with processing are set after a return statement thus they never get executed.

Instead of concat: true it should be separate: false. Primarily because concatenate is already default behavior outside of this task, so renaming makes it clear that this is something distinct from other plugins, and it clarifies that this is an action the user can take to compile individual files, rather than the other way around. make sense?

Hi!

Have you checked sass/less supporting mediaquery in compiled css files?

When I set dumpLineNumbers option to 'mediaquery' (without compressing of course), the mediaquery info doesn't show the correct line number of the less definition in the compiled css file but shows the line number that points to the compiled css which is useless while developing with less.

If I compile with lessc command from terminal, everything works fine!

Could you solve this problem because source map would be very useful.

Here's a repo you can check this issue:
https://github.com/ruffle1986/less-workflow

just run 'npm install' and 'less:dev' task with grunt.

When including assemble-less in my Gruntfile, I needed to manualy set version to

node_modules/assemble-less/test/versions/1.3.3

otherwise it gave me an error that it couldn't find less. I think the default assumes you are running the plugin from the main directory.

In 0.4.8 I used to be able to use (maybe abuse) the banner option to dynamically inject a variable for use with the Less parser like so:

banner: "@static-prefix: '<%=staticUriPrefixCss%>';"

After I upgraded to 0.5.2 today this is not possible anymore. The string is now simply prepended to the output, instead of being 'consumed' by Less.

Hmm. Is there a recommended way of injecting dynamic variables? Using banner for this did feel a bit hackish, admittedly. In an earlier commit I saw something about a variablesoption...

This feature is important to me. In the framework that I'm building this allows users to define an URI prefix to static assets once, yet have it reflected in the router and generated assets and so on. Perfect for possible later integration of a frontend in other, less flexible backends.

I was using assemble-less to compile bootstrap when I got this error:

>> SyntaxError: Maximum call stack size exceeded in vendor/bootstrap/less/grid.less on line 11, column 3:
>> 10 .container {
>> 11   .container-fixed();
>> 12

This bug is described here: less/less.js#1928

I fixed this, changing less dependency in package.json from ~1.6.0 to ~1.7.0:

  "dependencies": {
    "grunt-lib-contrib": "~0.6.1",
    "lodash": "~2.4.1",
    "less": "~1.7.0",
    "async": "~0.2.9"
  },

options: {
                version: '/usr/bin/less'
            }

gives the following error message

                                                              ^
Warning: Cannot find module '[...]webapp/usr/bin/less' Use --force to continue.

assemble-less is handling whitespace/newlines around comments differently than lessc (lessc leaves the newlines, assemble-less is removing them).

Obviously this isn't a major problem but it does cause a nuisance with any commited css files.

eg,

/* blah
****/
/* blah
****/

vs

/* blah
****/

/* blah
****/

Some inconsistencies here:

Section header says

The "less" task

The section itself says

In your project's Gruntfile, add a section named assemble

The example code says "assemble-less" (which isn't even valid json and will give you a parse error).

The real plugin however uses the task "less". Took me some time to figure out as a guy new to this.

Since Grunt has already plenty of LESS support, I think it would be a good idea to elaborate what assemble-less does better than it in the README.md.

The function processDirective uses the incoming directives literally. Globbing is not implemented and if used the import will fail.

Globbing would however be very useful for the @import (reference) use case. That's how I tried to use it anyway: Throw all files containing variables, mixins, helpers (own or vendor) in a lib folder and let Less sort out what's actually needed.

currently if you have a newline at the end of the banner option:

less: {
  options: {
    compress: true,
    banner: '/*! Banner */\n'
  }
}

the trailing newline will also be removed. the banner should not be appended before the css is compressed. it should let users to choose whether the banner is in a new line or not.

I am using assemble-less for a project I am building, and I have some variable like this:
@grid-size: 180px;
@wide: 12;
@min-wide: @wide * @grid-size;

When I do: body { width: @min-wide; }

It output nicely like: body { width: 1620px; }

But when I do:
@media and all (min-width: @min-wide) { }

It output:
@media all and (max-width: 12 * 180px) { }

I am not sure if it is a less bug or it has been fix on 1.7, or I am just not doing it correctly. But any suggestion would be much appreciate.

Thank you

Hi, i am trying to use metadata, but this is not working.

i have this file - utils/data/yml/palette.yml with this content

palette.yml

topBarBg: "purple"

on my settings file i have - @topBarBg : <%= palette.topBarBg %>;

When i run override task the @topBarBg remains with the value <%= palette.topBarBg %>; and not purple. What am i doing wrong? can you help please?

    less: {
        override: {
            options: {
                metadata: 'utils/data/yml/*.{json,yml}'
            },
            styles: {
                files: {
                    "app/css/app.css": ["app/less/app.less"]
                }
            }
        }
    },

the case I have is the framework skrollr. to work with stylesheets i need to add

@-skrollr-keyframes animation-name {
  anchor-target {.welcome}
  top {
    opacity:0
  }
}

the less parser of course breaks at anchor-target {.welcome}

is there a way to get it work with a syntax like that. maybe to whitelist some syntax? for example whitelist @-my-custom-name { and everything here }

This dependency listed in package.json is not available anymore.

https://github.com/cloudhead/less.js/tarball/1.4.1-wip

This feature would allow dynamic building of components in Assemble

I noticed you use grunt-lib-contrib.

It's deprecated and I would recommend you switch to the extracted modules instead:
stripPath => strip-path
minMaxInfo => maxmin
getNamespaceDeclaration => ticket

Add support for @import options: less|css|multiple|once|inline|mute. I'm not sure if this should be done in the require option or elsewhere.

Maybe we change the require option to imports (not import)? And then augment that option with the import options somehow?

options: {
  imports: [
    'globals/variables.less',
    'globals/mixins.less',
    '(mute) bootstrap.less'
  ]
}

Actually I think we should extend the imports object and have the imports[option] map directly to the options in the Less parser:

options: {
  imports: {
    less: [
      'globals/variables.less',
      'globals/mixins.less'
    ],
    mute: {
      'bootstrap.less'
    }
  }
}

@doowb, pull this down and take a look at it when you get a chance. :-)

https://github.com/assemble/assemble-less/tree/less-modules

It's just a first step, but it's an interesting feature for sure.