What happened to app.less?

In the How roots uses grunt screencast, Ben edits a file called app.less (Roots 6.5) which seems to contain a commented file for main site sections. Is there an equivalent in roots 7? I couldn’t see mention of this in CHANGELOG.md.

The LESS files are now separated based on layout/component and they will all be watched and compiled by Grunt, provided they’re present in main.less.

So, for my personal less code, where I must to put it?

Must I create a new less file (my-personal-less-code.less) inside roots/assets/less folder and import it to main.less with @import “my-personal-less-code”; ?

Is this a good practice?

Thank you!

You can add your variables in _variables.less, global styling in _global.less, general styling in layouts/_general.less, page styling in layouts/_pages.less, specific homepage styling in layouts/pages/_home.less etc.

These are all standard imported in main.less. If you want you can create your own less files, as long as they are included in the main.less file.

You can also create your own as you suggest if the ones that come with roots don’t fit, so for example I have a _navigation.less file added to the layouts directory and then add @import “layouts/_navigation”; to the main.less file along with the other files such as _header.less and _general.less etc.

Ok! thank you very much to both

Another related question:

What about roots/assets/vendor/bootstrap/less/variables.less file?

Must I leave untouched this file and overwrite the variables inside with my own variables in roots/assets/less/_variables.less?

Jup, that is exactly how it’s supposed to be!

2 Likes