{"id":18448,"date":"2012-09-20T12:46:49","date_gmt":"2012-09-20T19:46:49","guid":{"rendered":"http:\/\/css-tricks.com\/?p=18448"},"modified":"2017-04-13T17:42:04","modified_gmt":"2017-04-14T00:42:04","slug":"using-less-as-a-live-css-engine","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/using-less-as-a-live-css-engine\/","title":{"rendered":"Using LESS as a Live CSS Engine"},"content":{"rendered":"<div class=\"explanation\">The following is a guest post by Andrew Powers of <a href=\"http:\/\/www.pagelines.com\/\" rel=\"noopener\">PageLines<\/a>. Andrew wrote to me about how they use LESS in their product and how they think it&#8217;s better than Sass for what they do. In complete honesty, I still disagree (they are using an unofficial PHP port of LESS, and there is an <a href=\"http:\/\/code.google.com\/p\/phamlp\/\" rel=\"noopener\">unofficial PHP port<\/a> of Sass also), but I can&#8217;t argue that they way they use it is pretty cool and works for them. This is Andrew explaining that.<\/div>\n<p>There has been a lot of talk recently about using LESS\/Sass as preprocessors for creating cleaner, cross-browser friendly CSS faster and easier than we could before. And from my own experience I can tell you that once you go to one of these languages, you\u2019ll have so much fun that you won\u2019t be going back to plain CSS.<\/p>\n<p>The problem with these languages, however, is the word \u2018preprocessor.\u2019  <\/p>\n<p>The idea of a preprocessor is there is this \u2018processing\u2019 step between the code you write and the code you use on your site. That\u2019s kind of a hassle. Also it prevents us from using variables or functions dynamically, which might be useful if you have users customizing the presentation of your code (like in a WordPress theme).<\/p>\n<p>Well, live processing LESS in production is very possible, and here is how we\u2019re using it to solve some big problems at our company.<\/p>\n<h3>About PageLines<\/h3>\n<p><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/pagelines-loves-less.png' alt='pagelines-loves-less' data-recalc-dims=\"1\" \/><\/p>\n<p><a href=\"http:\/\/www.pagelines.com\/\" rel=\"noopener\">PageLines<\/a> makes a \u2018drag and drop\u2019 framework, built on WordPress, intended to make building professional websites easy.<\/p>\n<p>Trying to keep the professional, yet easy (typical users shouldn\u2019t have to write *any* code), has created a few engineering challenges which LESS has helped solve.<\/p>\n<h3>Use Case<\/h3>\n<p>The PageLines framework is built on WordPress (in PHP). In considering this solution we had several goals. For example, we wanted to:<\/p>\n<ul>\n<li>Allow CSS to be customized based on user options inside the framework<\/li>\n<li>Organize and compartmentalize CSS better without upping performance killing HTTP requests<\/li>\n<li>Create better, more cross-browser designs, faster and easier without having to deal with a new \u2018preprocessing\u2019 step in our workflow<\/li>\n<\/ul>\n<h3>Why LESS for Live Processing? (Not SASS\/Compass)<\/h3>\n<p>Chris wrote an interesting article on the merits of <a href=\"https:\/\/css-tricks.com\/sass-vs-less\/\">Sass vs. LESS<\/a>. However, there are a couple thoughts left out that shift things in the favor of LESS for live processing for us.  Specifically LESS was designed in JavaScript, <em>the<\/em> developer friendly language, and was also created to be used live.  Most importantly, it compiles 6x faster than SASS. Jacob Thornton, architect of the popular Bootstrap by Twitter, has some more input on the debate <a href=\"http:\/\/wordsbyf.at\/2012\/03\/08\/why-less\/\" rel=\"noopener\">here<\/a>.<\/p>\n<p>While the original live less.js approach has too much of a delay in production, it still helps seal the deal for LESS when we\u2019re talking about using it in production instead of as a preprocessor.  We ultimately used <a href=\"http:\/\/leafo.net\/lessphp\/\" rel=\"noopener\">a special PHP port of Less.js<\/a> to accomplish our goal, more on that in a second.<\/p>\n<p>As a sidenote, it\u2019s theoretically possible to use SASS \u2018live\u2019 if you\u2019re developing in a Ruby on Rails environment. We haven\u2019t actually tested this, so I\u2019m not sure about the performance or bottlenecks using that approach.<\/p>\n<h3>How we implemented it<\/h3>\n<p>For us the the key to executing a live LESS engine was this port of the LESS processor to PHP (link) which allowed us to parse and cache LESS files based on user action on our server. To get this working the framework just does the following.<\/p>\n<ul>\n<li>Grabs all the LESS files throughout the framework and adds them to a PHP variable<\/li>\n<li>Uses the above PHP script to parse the LESS into CSS and puts it in a variable<\/li>\n<li>Outputs the CSS to a file which is cached both on the server and on visitors browsers<\/li>\n<li>The process is run again whenever a user saves their settings or installs a new extension<\/li>\n<\/ul>\n<h3>Code Example<\/h3>\n<p>This isn\u2019t the actual code we used, but should give you a general idea.<\/p>\n<pre rel=\"PHP\"><code class=\"language-javascript\">$parser = new lessc(); \/\/ Start new object from PHP Less script\r\n$less_code = file_get_contents(\u2018\/path\/to\/whatever.less\u2019); \/\/ Grab LESS\r\n$processed_css = $parser-&gt;parse($less_code); \/\/ Process to CSS\r\nfile_put_contents(\u2018path\/to\/css-file.css\u2019, $processed_css); \/\/ Write CSS\r\necho \u201c&lt;link rel='stylesheet' href='http:\/\/url\/to\/css-file.css' type='text\/css' media='all' \/&gt;\u201d; \/\/ Link CSS in page<\/code><\/pre>\n<h3>Results<\/h3>\n<figure id='post-18451 media-18451' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/dynamic-colors.png' alt='dynamic-colors' data-recalc-dims=\"1\" \/><figcaption>Changing background color in the framework. Highlights and contrast element colors are calculated using LESS.<\/figcaption><\/figure>\n<h3>Control &#8211; Dynamic Colors and Typography<\/h3>\n<p>One of the coolest things about implementing LESS inside of the framework is that we\u2019re able to dynamically control colors and typography based on user selections.  This allows us to design things well, while still giving users the ability to customize colors and type.<\/p>\n<h3>Options &#8211; LESS Option for Users<\/h3>\n<figure id='post-18452 media-18452' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/lessoption.png' alt='lessoption' data-recalc-dims=\"1\" \/><\/figure>\n<p>Users are able to actually add their own LESS in the admin options panel. They can use common variables for the background color or main fonts. This has been a feature that users love and can use to create more cross-browser, robust customization of the framework.<\/p>\n<h3>Organization &#8211; Several Files Into One<\/h3>\n<figure id='post-18453 media-18453' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/files-to-one.png' alt='files-to-one' data-recalc-dims=\"1\" \/><\/figure>\n<p>Using a processor for the LESS allows us to have all our css\/less files organized by type, then grouped together at runtime into a single \u2018compiled-css\u2019 file. Definitely makes it easier to find what we\u2019re looking for.<\/p>\n<h3>Optimization &#8211; Cleaner, Faster, Cross-Browser CSS<\/h3>\n<figure id='post-18454 media-18454' class='align-none'><img src='https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2012\/09\/mixins.png' alt='mixins' data-recalc-dims=\"1\" \/><\/figure>\n<p>Because we can use nested selectors &#038; mixins the code we are writing is much cleaner. While this is the same as when using a preprocessor, not having to deal with finding all the files and compiling allows us to use this without the hassles.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Andrew Powers of PageLines explain how they use LESS in their product to give it some neat features.<\/p>\n","protected":false},"author":248431,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":192815,"url":"https:\/\/css-tricks.com\/css\/","url_meta":{"origin":18448,"position":0},"title":"The CSS at&#8230;","date":"January 15, 2015","format":false,"excerpt":"There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":323373,"url":"https:\/\/css-tricks.com\/comparing-styling-methods-in-2020\/","url_meta":{"origin":18448,"position":1},"title":"Comparing Styling Methods in 2020","date":"October 19, 2020","format":false,"excerpt":"Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It's in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based architecture. But the styling methods talked about transcend Next.js, and can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/css-stylized.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":158614,"url":"https:\/\/css-tricks.com\/abstraction-in-web-languages-and-variables-and-stuff\/","url_meta":{"origin":18448,"position":2},"title":"About Variables in CSS and Abstractions in Web Languages","date":"December 18, 2013","format":false,"excerpt":"Variables are coming to CSS. They already have implementations, so there is no stopping it now. Firefox has them in version 29 and Chrome has them unprefixed in 29+ if you have the \"Enable experimental Web Platform features\" flag turned on. To be clear, no amount of arguing on whether\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":352328,"url":"https:\/\/css-tricks.com\/proposal-for-css-when\/","url_meta":{"origin":18448,"position":3},"title":"Proposal for CSS @when","date":"September 21, 2021","format":false,"excerpt":"CSS is on a tear lately. Again, I've heard of a brand new thing I've never seen before, and again it's via Miriam: CSS Conditionals. \ud83c\udf89 CSSWG just resolved to adopt @tabatkins when\/else proposal into the next level of CSS Conditionals. Here's the proposal:https:\/\/t.co\/IXEOK7xKcL\u2014 Mia, on Bass (@TerribleMia) September 15,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/css-media-query-when.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311801,"url":"https:\/\/css-tricks.com\/global-css-options-with-custom-properties\/","url_meta":{"origin":18448,"position":4},"title":"Global CSS options with custom properties","date":"May 29, 2020","format":false,"excerpt":"With a preprocessor, like Sass, building a logical \"do this or don't\" setting is fairly straightforward: $option: false; @mixin doThing { @if $option { do-thing: yep; } } .el { @include doThing; } Can we do that in native CSS with custom properties? Mark Otto shows that we can. It's\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/09\/custom-properties-code.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":156753,"url":"https:\/\/css-tricks.com\/introducing-scut-new-sass-utility-library\/","url_meta":{"origin":18448,"position":5},"title":"Introducing Scut, a new Sass utility library","date":"November 21, 2013","format":false,"excerpt":"The following is a guest post by David Clark. I think David's new Sass library \"Scut\" is pretty interesting. It's like a design utility library, which is distinct from a design pattern library in that it enforces no particular structure or particular visual design. I've always found this kind of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18448"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/248431"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18448"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18448\/revisions"}],"predecessor-version":[{"id":253701,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/18448\/revisions\/253701"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=18448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}