Setting up new framework projects and using LESS

Question

So, I'm trying to set up an environment in which I can generate a new project and minimize the setup / complexity associated with setting up this new project. I use Structurer Pro (from nettuts +) to create a set of files, and this is an awesome thing. I have github to configure MAC, which allows me to grab the latest Foundation Foundation frameworks and put them in the current project.

Now I am also trying to include LESS in this process. However, css Foundation files are not currently configured using LESS, which means I have 2 options ... (1) take the current version and LESS-ize, and then use these customized files to create new projects. (2) do not use LESS ...

Another problem I ran into is apparently quite a few LESS compilers (simpLESS, CodeKit, LESS, compass), but none of them merge css files! Therefore, if I configured 10 LESS files (e.g. IE.less, mobile.less, grid.less, typography.less, etc.), and they have variables in them, I really don't want the output as there were 10 css files. I really need 1 compiled css file as output. I know that I can do it manually or even through Clean css or any of 30 other sites ...

But is there one thing that will allow me to use the latest files to create the project framework, customize it by applying a set of color swatches to a series of variables (LESS), and then compile and combine the resulting CSS for the actual implementation?

Answer 1

The foundation completed the transition to SCSS in version 3, so this was a kind of controversial moment ...

Answer 2

Trying to answer some of your questions:

• Rename the .css files to a .less file and place in the / less / directory.
  • Any .css file is a valid .less file (but not vice versa)
  • You do not need to convert this CSS to LESS, do this only for the things you are going to change, and save some time;)
• In your master.less file, import these files using the @import 'foundation-file' file;
  • re: how to merge css / less files :)
• Compile only master.less and include it in your HTML
  • master.less is your intended MAIN stylesheet, which can only contain @import instructions, it’s easier for me to manage all this way (and where the combination happens). it will compile in master.css, which you then use.

Answer 3

I'm not sure what the css foundation includes, if it is reset.css or something like that, I would just leave it and not reduce it. You will have two css files: one reset.css and one styles.css (the last of which will be compiled from fewer files).

Then you can add your own customization, including style.less, which @imports the various components, if you do this enough in common, you can reuse it in different projects.

The lessc compiler processes @imports of various files and combines them into one file: I have styles.less, which is @imports base.less components.less, etc. I just compile styles.less into styles.css and this handles the rest:

lessc styles.less styles.css 

See: https://gist.github.com/1480684