Skip to content

Support Less for stylesheet processing #63

Closed
nirvdrum opened this Issue Jun 28, 2009 · 14 comments

9 participants

@nirvdrum

It would be nice if jekyll allowed the use of Less for stylesheet processing. I've written up code to do such at: http://github.com/nirvdrum/jekyll/tree/integrate_less

The shoulda tests and Cucumber features should make clear what's going on. The gist of it is that a file named "whatever.less" in the "_stylesheets" directory will get transformed to "_site/css/whatever.css". It support arbitrary nesting of subdirs in the "_stylesheets" directory to support CSS hierarchy organization.

I'm open to suggestions on the "_stylesheets" and "_site/css" naming convention.

Another thing to note is that if there is a "css" directory at the root level, the contents will be merged during transformation. As such, I've left the "css" directory in tact in the test sources. The screen.css file could just as easily be moved into the "_stylesheets" directory, where it will not be processed, as it does not have the ".less" extension.

@appden
appden commented Sep 12, 2009

Hi,

I don't understand why the _stylesheets directory is necessary. Why not just run LESS over any file with a .less extension, just as Textile is run over .textile files and Markdown on .md/mkdwn/markdown files?

Maybe I'm missing the point, but it seems to me we should continue to use the convention of letting the file extension dictate the filter used in the Convertible module, and skip all the _stylesheets directory logic. My same argument should hold true for SASS and HAML as well.

@nirvdrum

The _stylesheets directory is a parallel to the _posts directory. As far as I know, jekyll only runs textile and markdown over files in the _posts directory (I haven't actually tried anywhere else). LESS will only be be run over files with a .less extension, so SASS files should be able to be placed in _stylesheets without any problems.

I suppose the alternative is to allow them to be placed anywhere and then not publish the .less files.

@appden
appden commented Sep 12, 2009

Okay, I understand your thinking now, but actually Jekyll runs Markdown or Textile over any file with the corresponding extension, not just posts. This is done in the Convertible module that is included and called from the Page and Post modules.

An example of this would be my about.textile page on my site:
http://github.com/appden/appden.github.com/tree/master

@nirvdrum

Gotcha. That's a feature I haven't used. So, I'm not opposed to the proposed change. It'll require some reworking of the patch though.

@avdgaag
avdgaag commented Oct 6, 2009

I've implemented Less integration in my fork in a dumb way (see it here around line 200). This follows the simple rule of the extensions dictating the filter. Would this, in principle, be a suitable solution? (this is not a pull request, but an implementation suggestion)

@dgrijalva

I was playing around with something similar. It seems like the change could better be made in two phases:

  • add support for preprocessing of "StaticFiles" through config (ie files with the .less extension are processed through the less processor, js files might be run through a minifier, etc)
  • add a less preprocessor that uses the above behavior
@gerrit
gerrit commented Nov 9, 2010

With the plugin support now, supporting less becomes trivial. Here's a gist that will accomplish transforming all .less files (containing the YAML front matter) into the corresponding css: https://gist.github.com/668957. Place it in your _plugins folder

@icco
icco commented Dec 12, 2010

You could also always just use less.js: https://github.com/cloudhead/less.js

@dgrijalva

Yes. I think the recent plugin support makes this possible. This ticket can probably be closed.

@andyfowler

I have a gist that compiles files via less.js, although it's broken in >= 0.9.0 (see issue #268)

https://gist.github.com/642739

@icco
icco commented Jan 17, 2011

Maybe I misunderstand, but isn't the point of less.js that it doesn't need the compiler? From my tests you just need to add the following two lines to your template:

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="https://github.com/cloudhead/less.js/raw/master/dist/less-1.0.40.min.js"></script>

Your gist seems to add support for less, which is also great and can be done via the plugin system.

@andyfowler

Yep -- my gist is a Jekyll plugin.

You're right -- you can use less.js in the browser during development without precompilation, but for decent performance, you'll want to compose Less into standard CSS on a production site. Personally, I find Jekyll + this plugin (which uses node.js to compile) to be faster and easier to debug, even during development.

@matthodan

You can add Less preprocessing capability via the Jekyll Asset Pipeline plugin. Might be worth checking out.

@qrush
qrush commented Jan 1, 2013

Yep, check the plugins or pipeline gems out. :hammer:

@qrush qrush closed this Jan 1, 2013
@sentenza sentenza referenced this issue in sentenza/sentenza.github.io Feb 15, 2014
Open

Add LESSCSS support #2

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.