Meta tags:
description=Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino) or client-side (modern browsers only). ;
author=The Core Less Team;

Headings (most frequently used words):

and, overview, variables, mixins, nesting, operations, escaping, functions, namespaces, accessors, maps, scope, comments, importing, nested, at, rules, bubbling, calc, exception, it, css, with, just, little, more,

Text of the page (most frequently used words):
the (39), less (38), and (27), width (25), color (21), css (16), you (15), can (14), for (13), result (11), are (10), var (10), header (10), not (10), mixins (10), min (10), media (10), #variables (8), also (8), bundle (8), background (8), base (8), functions (8), more (7), see (7), want (7), with (7), white (6), button (6), this (6), use (6), your (6), font (6), size (6), 768px (6), language (5), about (5), block (5), properties (5), border (5), colors (5), class (5), black (5), using (5), calc (5), conversion (5), component (5), height (5), styles (5), docs (4), issues (4), documentation (4), learn (4), pretty (4), will (4), red (4), one (4), have (4), they (4), following (4), example (4), scope (4), that (4), maps (4), solid (4), 1px (4), just (4), selectors (4), escaping (4), min768 (4), nested (4), numbers (4), units (4), operations (4), 300px (4), rule (4), bordered (4), overview (4), code (3), under (3), these (3), import (3), importing (3), style (3), both (3), comments (3), may (3), like (3), mixin (3), variable (3), from (3), parent (3), outputs (3), note (3), namespace (3), display (3), say (3), convert (3), which (3), 2rem (3), element (3), results (3), anything (3), inside (3), 20px (3), does (3), math (3), 111 (3), type (3), other (3), impossible (3), into (3), same (3), rules (3), way (3), bubbling (3), navigation (3), nesting (3), 10px (3), features (3), tools (3), changelog (2), released (2), library (2), expected (2), extension (2), line (2), used (2), page (2), placed (2), before (2), where (2), blue (2), green (2), primary (2), secondary (2), appear (2), tab (2), now (2), some (2), namespaces (2), accessors (2), function (2), reference (2), percentage (2), them (2), sets (2), cases (2), write (2), any (2), evaluate (2), but (2), exception (2), 222 (2), division (2), 112244 (2), 6cm (2), meaningful (2), length (2), gives (2), operate (2), explicitly (2), stated (2), unit (2), filler (2), 3cm (2), 5cm (2), resolution (2), url (2), 800px (2), 1280px (2), img (2), retina2x (2), png (2), image (2), 192dpi (2), 600px (2), top (2), clearfix (2), here (2), logo (2), 12px (2), post (2), menu (2), set (2), detailed (2), repo (2), script (2), npm (2), compiler, currently, source, mit, license, maintained, core, team, imports, typo, works, much, file, all, available, optionally, specified, files, get, heck, comment, inline, lazy, loading, custom, definitions, referenced, identical, previous, very, similar, first, looked, locally, aren, found, inherited, rulesets, values, append, don, output, orange, written, our, grey, citation, hover, sometimes, group, organizational, purposes, offer, encapsulation, intuitively, later, reuse, distributing, confused, lighten, spin, saturate, returns, f04615, straightforward, uses, increases, saturation, then, lightened, spun, degrees, provides, variety, transform, manipulate, strings, maths, documented, fully, many, previously, requiring, quote, needed, simply, allows, arbitrary, string, property, value, changes, except, interpolation, 25vh, 50vh, compatibility, expressions, change, setting, make, always, work, recommended, 101010, ffffff, performed, outside, parens, operator, however, find, useful, 223355, 224488, arithmetic, 3mm, 2cm, multiplication, would, most, multiplied, area, support, specifying, areas, assign, 4px, 5px, incompatible, 5mm, 10mm, converted, arithmetical, number, possible, mathematical, take, account, adding, subtracting, comparing, has, leftmost, ignored, rad, such, relative, order, against, elements, ruleset, remains, unchanged, called, supports, hidden, visibility, clear, content, after, zoom, pseudo, method, classic, hack, rewritten, represents, current, selector, resulting, concise, mimics, structure, html, ability, instead, combination, cascading, let, ids, well, drop, name, dotted, 2px, bottom, including, mixing, bunch, another, self, explanatory, what, add, quick, third, party, usage, instructions, list, built, because, looks, learning, breeze, only, makes, few, convenient, additions, reasons, learned, quickly, stands, leaner, sheets, backwards, compatible, official, javascript, tool, converts, github, depth, guide, toggle, view, try, online, playground, src, https, cdn, jsdelivr, net, link, rel, stylesheet, text, href, browser, lessc, install, node, little, getting, started,

Text of the page (random words):
getting started less js it s css with just a little more use with node js npm install g less lessc styles less styles css or the browser link rel stylesheet less type text css href styles less script src https cdn jsdelivr net npm less script or try the online playground view the less js changelog overview variables mixins nesting nested at rules and bubbling operations calc exception escaping functions namespaces and accessors maps scope comments importing toggle navigation overview using less js functions in depth guide tools about github docs repo docs issues less repo less issues overview less which stands for leaner style sheets is a backwards compatible language extension for css this is the official documentation for less the language and less js the javascript tool that converts your less styles to css styles because less looks just like css learning it is a breeze less only makes a few convenient additions to the css language which is one of the reasons it can be learned so quickly for detailed documentation on less language features see features for a list of less built in functions see functions for detailed usage instructions see using less js for third party tools for less see tools what does less add to css here s a quick overview of features variables these are pretty self explanatory width 10px height width 10px header width width height height outputs header width 10px height 20px learn more about variables mixins mixins are a way of including mixing in a bunch of properties from one rule set into another rule set so say we have the following class bordered border top dotted 1px black border bottom solid 2px black and we want to use these properties inside other rule sets well we just have to drop in the name of the class where we want the properties like so menu a color 111 bordered post a color red bordered the properties of the bordered class will now appear in both menu a and post a note that you can also use ids as mixins learn more about mixins nesting less gives you the ability to use nesting instead of or in combination with cascading let s say we have the following css header color black header navigation font size 12px header logo width 300px in less we can also write it this way header color black navigation font size 12px logo width 300px the resulting code is more concise and mimics the structure of your html you can also bundle pseudo selectors with your mixins using this method here s the classic clearfix hack rewritten as a mixin represents the current selector parent clearfix display block zoom 1 after content display block font size 0 height 0 clear both visibility hidden learn more about parent selectors nested at rules and bubbling at rules such as media or supports can be nested in the same way as selectors the at rule is placed on top and relative order against other elements inside the same ruleset remains unchanged this is called bubbling component width 300px media min width 768px width 600px media min resolution 192dpi background image url img retina2x png media min width 1280px width 800px outputs component width 300px media min width 768px component width 600px media min width 768px and min resolution 192dpi component background image url img retina2x png media min width 1280px component width 800px operations arithmetical operations can operate on any number color or variable if it is possible mathematical operations take units into account and convert numbers before adding subtracting or comparing them the result has leftmost explicitly stated unit type if the conversion is impossible or not meaningful units are ignored example of impossible conversion px to cm or rad to numbers are converted into the same units conversion 1 5cm 10mm result is 6cm conversion 2 2 3cm 5mm result is 1 5cm conversion is impossible incompatible units 2 5px 3cm result is 4px example with variables base 5 filler base 2 result is 10 other base filler result is 15 multiplication and division do not convert numbers it would not be meaningful in most cases a length multiplied by a length gives an area and css does not support specifying areas less will operate on numbers as they are and assign explicitly stated unit type to the result base 2cm 3mm result is 6cm you can also do arithmetic on colors color 224488 2 result is 112244 background color 112244 111 result is 223355 however you may find less s color functions more useful from 4 0 no division is performed outside of parens using operator color 222 2 results in 222 2 not 111 background color ffffff 16 results is 101010 you can change math setting if you want to make it always work but not recommended calc exception released v3 0 0 for css compatibility calc does not evaluate math expressions but will evaluate variables and math in nested functions var 50vh 2 width calc 50 var 20px result is calc 50 25vh 20px escaping escaping allows you to use any arbitrary string as property or variable value anything inside anything or anything is used as is with no changes except interpolation min768 min width 768px element media min768 font size 1 2rem results in media min width 768px element font size 1 2rem note as of less 3 5 you can simply write min768 min width 768px element media min768 font size 1 2rem in 3 5 many cases previously requiring quote escaping are not needed functions less provides a variety of functions which transform colors manipulate strings and do maths they are documented fully in the function reference using them is pretty straightforward the following example uses percentage to convert 0 5 to 50 increases the saturation of a base color by 5 and then sets the background color to one that is lightened by 25 and spun by 8 degrees base f04615 width 0 5 class width percentage width returns 50 color saturate base 5 background color spin lighten base 25 8 see function reference namespaces and accessors not to be confused with css namespace or namespace selectors sometimes you may want to group your mixins for organizational purposes or just to offer some encapsulation you can do this pretty intuitively in less say you want to bundle some mixins and variables under bundle for later reuse or distributing bundle button display block border 1px solid black background color grey hover background color white tab citation now if we want to mixin the button class in our header a we can do header a color orange bundle button can also be written as bundle button note append to your namespace e g bundle if you don t want it to appear in your css output i e bundle tab maps as of less 3 5 you can also use mixins and rulesets as maps of values colors primary blue secondary green button color colors primary border 1px solid colors secondary this outputs as expected button color blue border 1px solid green see also maps scope scope in less is very similar to that of css variables and mixins are first looked for locally and if they aren t found it s inherited from the parent scope var red page var white header color var white like css custom properties mixin and variable definitions do not have to be placed before a line where they are referenced so the following less code is identical to the previous example var red page header color var white var white see also lazy loading comments both block style and inline comments may be used one heck of a block style comment var red get in line var white importing importing works pretty much as expected you can import a less file and all the variables in it will be available the extension is optionally specified for less files import library library less import typo css learn more about imports less and these docs are maintained by the core less team documentation source code released under the mit license documentation under cc by 3 0 currently v4 1 3 less language and compiler issues less docs issues changelog