\n
![\"less\"](\"http:\/\/www.prasadk.com\/my-press\/wp-content\/uploads\/2013\/04\/less.png\")
<\/p>\n![\"\"](\"http:\/\/maddesigns.de\/sass-compass-introduction\/img\/Sass_logo.gif\"){kind=logo}
<\/p>\n
As it turns out, LESS\u200a\u2014\u200aand Sass for that matter\u200a\u2014\u200aare so much more than that. LESS and Sass share a lot of similarities in syntax, including the following:<\/p>\n
- \n
- Mixins \u2013 <\/strong>Classes for classes.<\/li>\n
- Parametric mixins \u2013 <\/strong>Classes to which you can pass parameters, like functions.<\/li>\n
- Nested Rules \u2013 <\/strong>Classes within classes, which cut down on repetitive code.<\/li>\n
- Operations \u2013 <\/strong>Math within CSS.<\/li>\n
- Color functions \u2013 <\/strong>Edit your colors.<\/li>\n
- Namespaces \u2013 <\/strong>Groups of styles that can be called by references.<\/li>\n
- Scope \u2013 <\/strong>Make local changes to styles.<\/li>\n
- JavaScript evaluation \u2013 <\/strong>JavaScript expressions evaluated in CSS.<\/li>\n<\/ul>\n
The main difference between LESS and Sass is the way in which they are processed. LESS is a JavaScript library and is, therefore, processed client-side.<\/p>\n
Sass, on the other hand, runs on Ruby and is processed server-side. A lot of developers might not choose LESS because of the additional time needed for the JavaScript engine to process the code and output the modified CSS to the browser. There are a few ways around this. The way I get around it is to use LESS only during the development process. Once I\u2019m finished, I copy and paste the LESS output into a minifier and then into a separate CSS file to be included in place of the LESS files. Another option is to use LESS.app to compile and minify your LESS files. Both options will minimize the footprint of your styles, as well as avoid any problems that might result from the client\u2019s browser not running JavaScript. While this is not likely, it\u2019s always a possibility.<\/p>\n
Once you have Sass installed you can compile Sass locally into CSS and ship the code with your project.<\/p>\n
LESS Is More<\/h3>\n
Installation<\/h4>\n
Including LESS in something that you\u2019re building is about as easy as it gets:<\/p>\n
- \n
- Go get yourself a copy of less.js<\/a>;<\/li>\n
- Create a file to put your styles in, such as style.less<\/em>;<\/li>\n
- Add the following code to your HTML\u2019s
<head><\/code>:<\/li>\n<\/ol>\n<link rel=\"stylesheet\/less\" type=\"text\/css\" href=\"styles.less\">\r\n<script src=\"less.js\" type=\"text\/javascript\"><\/script><\/code><\/pre>\nNote the
rel<\/code> attribute of the link. You are required to append the\/less<\/code> to the end of the value in order for LESS to work. You are also required to include the script immediately after the link to the style sheet. If you\u2019re using HTML5 syntax, and I can\u2019t imagine why you wouldn\u2019t be, you can leave out thetype=\"text\/css\"<\/code> and thetype=\"text\/javascript\"<\/code>.<\/p>\nThere\u2019s also a server-side version of LESS<\/a>. The easiest way to install LESS on the server is with Node Package Manager<\/a> (NPM).<\/p>\n
Variables<\/h4>\n
If you\u2019re a developer, variables are one of your best friends. In the event that you\u2019ll be using information repeatedly (in this case, a color), setting it to a variable makes sense. This way, you guarantee yourself consistency and probably less scrolling about looking for a hex value to copy and paste. You can even do some fun little adding and subtracting of hex values that you want to render. Take this example:<\/p>\n
@blue: #00c;\r\n@light_blue: @blue + #333;\r\n@dark_blue: @blue - #333;<\/code><\/pre>\nIf we apply these styles to three divs, we can see the gradated effect created by adding and subtracting the hex values to and from the original blue:<\/p>\n
![\"A](\"http:\/\/media.smashingmagazine.com\/wp-content\/uploads\/2011\/07\/blue-gradient.jpg\")
\nThe transition from @light_blue to @blue to @dark_blue.<\/em><\/p>\nThe only difference in variables between LESS and Sass is that, while LESS uses
@<\/code>, Sass uses$<\/code>. There are some scope differences as well, which I\u2019ll get to shortly.<\/p>\nMixins<\/h4>\n
On occasion, we might create a style that\u2019s intended to be used repeatedly throughout the style sheet. Nothing is stopping you from applying multiple classes to the elements in the HTML, but you could also do this without ever leaving your style sheet, using LESS. To illustrate this, I have pasted some sample code that one might use to style two elements on the page.<\/p>\n
.border {\r\nborder-top: 1px dotted #333;\r\n}\r\n\r\narticle.post {\r\nbackground: #eee;\r\n.border;\r\n}\r\n\r\nul.menu {\r\nbackground: #ccc;\r\n.border;\r\n}<\/code><\/pre>\nThis will give you something similar to what you would get if you had gone back to the HTML file and added the
.bordered<\/code> class to the two elements there\u200a\u2014\u200aexcept you\u2019ve done it without leaving the style sheet. And it works just as well:<\/p>\nWith Sass, you declare
@mixin<\/code> prior to the style to identify it as a mixin. Later, you declare@include<\/code> to call it.<\/p>\n@mixin border {\r\nborder-top: 1px dotted #333;\r\n}\r\n\r\narticle.post {\r\nbackground: #eee;\r\n@include border;\r\n}\r\n\r\nul.menu {\r\nbackground: #ccc;\r\n@include border;\r\n}<\/code><\/pre>\nParametric Mixins<\/h4>\n
Like having functions in your CSS, these can be immensely useful for those seemingly redundant tasks of modern-day CSS.
\nThe best and most useful example of their use relates to the many vendor prefixes that we struggle with during this transition from CSS2 to CSS3.<\/p>\nSelector Inheritance<\/h4>\n
Here\u2019s something not provided in LESS. With this ability, you can append a selector to a previously established selector without the need to add it in a comma-separated format.<\/p>\n
.menu {\r\n\tborder: 1px solid #ddd;\r\n}\r\n\r\n.footer {\r\n\t@extend .menu;\r\n}\r\n\r\n\/* will render like so: *\/\r\n.menu, .footer {\r\n\tborder: 1px solid #ddd;\r\n}<\/code><\/pre>\nNested Rules<\/h4>\n
Nesting classes and ids in CSS can be one of the only methods to keep your styles from interfering with and from being interfered with any other styles that may be added along the way. But this can get very messy. Using a selector like
#site-body .post .post-header h2<\/code> is unappealing and takes up a lot of unnecessary space. With LESS, you can nest ids, classes and elements as you go. Using the example above, you could do something like this:<\/p>\n#site-body { \u2026\r\n\r\n .post { \u2026\r\n\r\n .post-header { \u2026\r\n\r\n h2 { \u2026 }\r\n\r\n a { \u2026\r\n\r\n \t&:visited { \u2026 }\r\n \t&:hover { \u2026 }\r\n }\r\n }\r\n }\r\n}<\/code><\/pre>\nThe above code is essentially the same as the ugly selector in the previous paragraph, but it\u2019s much easier to read and understand, and it takes up much less space. You can also refer in element styles to their pseudo-elements by using the
&<\/code>, which in this case functions similar tothis<\/code> in JavaScript.<\/p>\nOperations<\/h4>\n
This is about what you would expect: using fixed numbers or variables to perform mathematical operations in your styles.<\/p>\n
@base_margin: 10px;\r\n@double_margin: @base_margin * 2;\r\n\r\n@full_page: 960px;\r\n@half_page: @full_page \/ 2;\r\n@quarter_page: (@full_page \/ 2) \/ 2;<\/code><\/pre>\nFor the record, I am aware that I could have also divided by four to get the
@quarter_page<\/code> variable, but I wanted to illustrate that the parentheses rule from the \u201corder of operations\u201d also applies. Parentheses are also required if you\u2019re going to perform operations within compound properties; for example,border: (@width \/ 2) solid #000<\/code>.<\/p>\nSass is a lot more versatile with numbers than LESS. It has built into it conversion tables to combine comparable units. Sass can work with unrecognized units of measurement and print them out. This feature was apparently introduced in an attempt to future-proof the library against changes made by the W3C.<\/p>\n
\/* Sass *\/\r\n2in + 3cm + 2pc = 3.514in\r\n\r\n\/* LESS *\/\r\n2in + 3cm + 2pc = Error<\/code><\/pre>\nColor Functions<\/h4>\n
Earlier, I mentioned how LESS helps me stick to a color scheme in my coding process. One of the parts that contributes to this the most is the color function. Suppose you use a standard blue throughout your styles, and you want to use this color for a gradated \u201cSubmit\u201d button in a form. You could go into Photoshop or another editor to get the hex value for a slightly lighter or darker shade than the blue for the gradient. Or you could just use a color function in LESS.<\/p>\n
@blue: #369;\r\n\r\n.submit {\r\n padding: 5px 10px;\r\n border: 1px solid @blue;\r\n background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); \/*Moz*\/\r\n background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); \/*Webkit*\/\r\n background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); \/*Opera*\/\r\n background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); \/*IE 10+*\/\r\n background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); \/*W3C*\/\r\n color: #fff;\r\n text-shadow: 0 -1px 1px rgba(0,0,0,0.4);\r\n}<\/code><\/pre>\nThe
lighten<\/code> function literally lightens the color by a percentage value. In this case, it will lighten the base blue by 10%. This method enables us to change the color of gradated elements and any other elements with that color simply by changing the base color itself. This could prove immensely helpful in theming. Plus, if you used a parametric function, like the ones listed above, you could alleviate some of that browser-prefix tedium with something as simple as.linear-gradient(lighten(@blue), @blue, 100%);<\/code>.<\/p>\nEither way, you get an effect that\u2019s rather nice:<\/p>\n
![\"Screenshot](\"http:\/\/media.smashingmagazine.com\/wp-content\/uploads\/2011\/07\/button-submit.jpg\")
\nOur nicely gradated, variable-based \u201cSubmit\u201d button.<\/em><\/p>\nThere are a lot of other color functions for darkening and saturating colors and even spinning the color wheel to other colors. I recommend trying them out to see what you can come up with.<\/p>\n
Sass seems to have a lot more color options\u200a\u2014\u200anot that I would need them all. Lighten and darken are the only ones that I see myself using often.<\/p>\n
Conditionals and Control<\/h4>\n
This is rather nifty, and another thing not provided by LESS. With Sass, you have the ability to use
if { } else { }<\/code> conditional statements, as well asfor { }<\/code> loops. It supportsand<\/code>,or<\/code> andnot<\/code>, as well as the<<\/code>,><\/code>,<=<\/code>,>=<\/code> and==<\/code> operators.<\/p>\n\/* Sample Sass \"if\" statement *\/\r\n@if lightness($color) >; 30% {\r\n background-color: #000;\r\n} @else {\r\n background-color: #fff;\r\n}\r\n\r\n\/* Sample Sass \"for\" loop *\/\r\n@for $i from 1px to 10px {\r\n .border-#{i} {\r\n border: $i solid blue;\r\n }\r\n}<\/code><\/pre>\nNamespaces<\/h4>\n
Namespaces can be used to add another level of organization to our CSS, by allowing us to create groups of commonly used styles and then pick from them along the way. For instance, if we created a group of styles called
defaults<\/code>, we could pull from this group when we come across an element that needs it.<\/p>\n#defaults {\r\n\t.nav_list () {\r\n\t\tlist-style: none;\r\n\t\tmargin: 0; padding: 0;\r\n\t}\r\n\t.button () { \u2026 }\r\n\t.quote () { \u2026 }\r\n}<\/code><\/pre>\nLater, in our code, if we come across a
ul<\/code> element within anav<\/code> element, we would know that we\u2019ll need our default style. So, we can simply call it, and it will be applied.<\/p>\nnav ul {\r\n\t#defaults > .nav_list;\r\n}<\/code><\/pre>\nScope<\/h4>\n
Scoping is standard throughout programming and thus standard in LESS. If you define a variable at the root level of your style sheet, it will be available and consistent throughout the document. If, however, you redefine the variable from within a selector such as an id or class, then it will be available\u200a\u2014\u200awith the new value\u200a\u2014\u200aonly within that selector.<\/p>\n
@color: #00c; \/* blue *\/\r\n\r\n#header {\r\n\t@color: #c00; \/* red *\/\r\n\r\n\tborder: 1px solid @color; \/* will have a red border *\/\r\n}\r\n\r\n#footer {\r\n\tborder: 1px solid @color; \/* will have a blue border *\/\r\n}<\/code><\/pre>\nBecause we\u2019ve restated the variable within the
#header<\/code> selector, the value for that variable will be different and will apply only within that selector. Anything before or after it will retain the value of the original statement.<\/p>\nScope is handled a little differently in Sass. In the above code, when the
@color<\/code> variable is changed tored<\/code>, it will be interpreted as such from that point on within the code.<\/p>\nComments<\/h4>\n
This part is pretty basic. Two types of comments are valid in LESS. The standard CSS comment,
\/* comment *\/<\/code>, is valid and will get passed through the processing and outputted. Single-line comments,\/\/ comment<\/code>, work as well but will not get passed and outputted and, as a result, are \u201csilent.\u201d<\/p>\nImporting<\/h4>\n
Importing is pretty standard, too. The standard
@import: 'classes.less';<\/code> works just fine. If, however, you\u2019re importing another LESS file, then the file extension is optional, so@import 'classes';<\/code> would work as well. If you want to import something without LESS processing it, you can use the.css<\/code> extension (for example,@import: 'reset.css';<\/code>).<\/p>\nString Interpolation<\/h4>\n
String values can also be used in variables and called within styles via
@{name}<\/code>.<\/p>\n@base_url = 'http:\/\/someurl.com';\r\nbackground-image: url(\"@{base_url}\/images\/background.png\");<\/code><\/pre>\nEscaping<\/h4>\n
There will be times when you need to include a value that is not valid CSS syntax or that LESS doesn\u2019t recognize. More often than not, it will be some crazy Microsoft hack. To avoid throwing errors and breaking LESS, you will need to escape them.<\/p>\n
.class {\r\n\tfilter: ~\"progid:DXImageTransform.Microsoft.Alpha(opacity=20)\";\r\n}\r\n\r\n\/* Will actually be outputted like this: *\/\r\n.class {\r\n\tfilter: progid:DXImageTransform.Microsoft.Alpha(opacity=20);\r\n}<\/code><\/pre>\nJavaScript Evaluation<\/h4>\n
This is one of my favorite parts of LESS: using Javascript in style sheets\u200a\u2014\u200asimply brilliant. You can use expressions and also reference aspects of the environment using backticks.<\/p>\n
@string: `'howdy'.toUpperCase()`; \/* @string becomes 'HOWDY' *\/\r\n\r\n\/* You can also use the previously mentioned interpolation: *\/\r\n@string: 'howdy';\r\n@var: ~`'@{string}'.topUpperCase()`; \/* becomes 'HOWDY' *\/\r\n\r\n\/* Here we access part of the document *\/\r\n@height = `document.body.clientHeight`;<\/code><\/pre>\nOutput Formatting<\/h4>\n
Whereas LESS has no output settings, Sass provides four output versions: nested, compact, compressed and expanded.<\/p>\n
Final Thoughts<\/h3>\n
These two libraries share a lot of basics. Both of them are fantastic tools for designers who code, and they can also help developers work more efficiently and quickly. If you\u2019re a fan of Ruby or HAML, then Sass might be right up your ally. For me, being a PHP and JavaScript geek, I tend to lean towards LESS for its ease of inclusion and access to JavaScript\u2019s expressions and document attributes. I doubt that I\u2019ve even come close to truly grasping the possibilities of programming in my style sheets, but I am intent on trying. If you\u2019ve been using either, or both, of these in your work, I\u2019d love to hear more about it and see some of your results. Tips, tricks and corrections are, of course, always welcome as well.<\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction to LESS and Comparison to Sass I\u2019ve been using LESS ever since I stumbled upon it. CSS was never really a problem for me, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[7,6],"tags":[],"_links":{"self":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/675"}],"collection":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/comments?post=675"}],"version-history":[{"count":5,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/675\/revisions"}],"predecessor-version":[{"id":681,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/675\/revisions\/681"}],"wp:attachment":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/media?parent=675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/categories?post=675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/tags?post=675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Create a file to put your styles in, such as style.less<\/em>;<\/li>\n
- Parametric mixins \u2013 <\/strong>Classes to which you can pass parameters, like functions.<\/li>\n