It varies on how complex your less is but i wouldn't run it on every
request, my sample took 20ms

But you only need to parse it when the file changes

A

On 15 January 2012 16:49, Aaron J. White <[email protected]> wrote:

> I might try this on my current project. what's the speed like alex?
>
> On Jan 14, 7:53 pm, Alex Skinner <[email protected]> wrote:
> > Hi Guys,
> >
> > I thought i'd post a sample using <cfscript language="javascript">
> >
> > In this example i'm using the popularhttp://www.lesscss.org/
> >
> > Note how easy it is to do server side javascript this is a simple UDF
> > which wraps the less parser all you need to do is download the js and
> > adjust the js path
> >
> > Yes its crude in that you wouldn't want to use an inline style tag and
> > ideally read and write to a file but shows how easy it is to do the
> > main bit, i picked some random less so you can see whats happening
> >
> > A
> >
> > <cfsavecontent variable="csstoparse">
> > // Less CSS is awesomehttp://www.lesscss.org/
> >
> > //Single line comments valid in less but don't show up in CSS neat huh
> >
> > @base: #f938ab;
> >
> > .box {
> >   border-color: lighten(@base, 40%);
> >
> > }
> >
> > @nice-blue: #5B83AD;
> > @light-blue: @nice-blue + #111;
> >
> > #header { color: @light-blue; }
> >
> > /*Mixin*/
> > .bordered {
> >   border-top: dotted 1px black;
> >   border-bottom: solid 2px black;}
> >
> > #menu a {
> >   color: #111;
> >   .bordered;}
> >
> > .post a {
> >   color: red;
> >   .bordered;}
> >
> > .post b {
> >   color: red;
> >   .bordered;}
> >
> > </cfsavecontent>
> >
> > <cffunction name="lesscssparse">
> >         <cfargument name="css" type="string" required="true">
> >         <cfargument name="pathtolesscss"
> default="/Users/alex/Sites/wwwroot/
> > test/lesscss.js" required="false">
> >         <cfscript language="javascript">
> >                 load($cf.get("pathtolesscss"));
> >                 var parser = new(less.Parser);
> >                 var result='';
> >                 parser.parse($cf.get("css"), function (err, tree) { if
> (err)
> > console(err);
> >                                 result=tree.toCSS({ compress: true });
>  // Minify CSS output as
> > well otherwise leave the { compress: true } out :-)
> >                                 $cf.tocfml("result")});
> >         </cfscript>
> >         <cfreturn result>
> > </cffunction>
> >
> > <cfoutput>
> > <style>
> > #lesscssparse(csstoparse)#
> > </style>
> > </cfoutput>
> >
> > Neat huh
> >
> > Alex
>
> --
> online documentation: http://openbd.org/manual/
>   google+ hints/tips: https://plus.google.com/115990347459711259462
>     http://groups.google.com/group/openbd?hl=en
>
>     Join us @ http://www.OpenCFsummit.org/ Dallas, Feb 2012
>



-- 
Alex Skinner
Managing Director
Pixl8 Interactive

Tel: +448452600726
Email: [email protected]
Web: pixl8.co.uk

-- 
online documentation: http://openbd.org/manual/
   google+ hints/tips: https://plus.google.com/115990347459711259462
     http://groups.google.com/group/openbd?hl=en

     Join us @ http://www.OpenCFsummit.org/ Dallas, Feb 2012

Reply via email to