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):

mixins, scope, extend, variables, the, variable, mixin, caller, selectors, plugin, to, deprecated, import, properties, detached, css, with, in, functions, selector, ruleset, lookups, access, overview, at, rules, guards, namespaces, matching, using, as, scoping, property, accessors, features, less, interpolation, multiple, reference, inside, use, advanced, arguments, and, values, unlocking, guard, operators, modify, has, from, parent, merge, rulesets, maps, file, extensions, options, parentheses, guarded, important, keyword, parametric, pattern, recursive, aliasing, tips, tricks, writing, your, first, null, js, object, pre, loaded, plugins, lazy, evaluation, new, default, changing, order, combinatorial, explosion, inline, once, optional, syntax, attached, extending, nested, exact, nth, expression, all, media, duplication, detection, cases, for, comma, space, urls, statements, example, classic, case, reducing, size, combining, styles, more, parameter, separators, overloading, named, parameters, rest, value, overriding, unnamed, into, comparison, logical, type, checking, calls, definition, visibility, referencing, won, will, lookup, have,

Text of the page (most frequently used words):
the (281), color (195), mixin (168), extend (108), less (104), and (99), you (97), can (90), #variable (88), #selector (84), this (72), mixins (70), ruleset (69), for (66), value (62), blue (59), use (57), not (57), with (55), background (54), will (52), import (51), when (49), variables (48), scope (47), detached (47), media (46), class (46), css (44), example (42), that (41), are (39), plugin (39), width (38), selectors (37), one (36), file (34), output (32), foo (32), prop (31), block (30), functions (29), inline (28), inside (28), into (28), red (28), function (27), only (27), library (27), caller (27), outputs (27), all (27), height (26), same (26), arguments (26), hover (26), pre (25), properties (25), have (25), border (25), box (25), want (24), but (24), from (24), used (23), your (22), which (22), colors (22), black (22), parent (22), radius (22), call (21), also (21), values (21), two (21), rule (21), nested (21), link (21), other (20), name (20), match (20), source (19), using (19), some (19), rules (19), any (19), multiple (19), green (19), reference (19), released (18), white (18), bucket (18), property (17), edit (17), markdown (17), button (17), lookup (17), padding (17), note (16), definition (16), guards (16), compiles (16), div (16), margin (16), may (15), rulesets (15), list (15), deprecated (15), does (15), wrap (15), return (14), like (14), var (14), true (14), primary (14), keyword (14), default (14), here (13), imported (13), would (13), space (13), because (13), syntax (13), was (13), defined (12), another (12), dark (12), header (12), top (12), matches (12), called (11), more (11), what (11), features (11), optional (11), behavior (11), display (11), declaration (11), its (11), results (11), following (11), comma (11), shadow (11), styles (11), after (10), once (10), has (10), add (10), them (10), guard (10), maps (10), important (10), navbar (10), above (10), identifier (10), plugins (9), there (9), each (9), being (9), extension (9), test (9), three (9), calls (9), screen (9), size (9), parameters (9), separated (9), widget (9), title (9), nth (9), url (9), png (9), grand (9), code (8), see (8), instance (8), options (8), just (8), get (8), new (8), without (8), now (8), similar (8), files (8), style (8), 20px (8), access (8), config (8), min (8), parentheses (8), include (8), 1px (8), statements (8), 5px (8), matter (8), image (8), evaluated (7), first (7), error (7), type (7), 10px (7), 200px (7), define (7), treat (7), merge (7), way (7), accessors (7), where (7), contains (7), alias (7), matching (7), last (7), matched (7), inner (7), extends (7), font (7), nav (7), overview (7), currently (6), works (6), before (6), install (6), set (6), contain (6), don (6), such (6), case (6), meaning (6), both (6), scoping (6), however (6), text (6), statement (6), 50px (6), generate (6), counter (6), key (6), assigned (6), secondary (6), referenced (6), ignored (6), body (6), useful (6), than (6), loop (6), namespace (6), outer (6), result (6), single (6), 2px (6), moz (6), parameter (6), base (6), namespaces (6), animal (6), bear (6), alert (6), attached (6), lazy (6), issues (5), these (5), well (5), different (5), pluginmanager (5), later (5), object (5), could (5), need (5), node (5), level (5), make (5), number (5), were (5), let (5), put (5), option (5), then (5), left (5), line (5), override (5), returns (5), overridden (5), itself (5), lookups (5), second (5), desktop (5), light (5), place (5), unlock (5), scopes (5), passed (5), html (5), argument (5), based (5), 100 (5), column (5), 40px (5), switch (5), big (5), they (5), order (5), parametric (5), extended (5), child (5), visited (5), pseudo (5), menu (5), borderradius (5), current (5), custom (5), docs (4), how (4), most (4), times (4), might (4), github (4), adding (4), anything (4), eval (4), val (4), something (4), false (4), their (4), means (4), private (4), bar (4), say (4), available (4), show (4), math (4), write (4), browser (4), simple (4), pattern (4), feature (4), apply (4), directly (4), element (4), rest (4), global (4), preferred (4), merged (4), pass (4), visible (4), removed (4), thing (4), namespacing (4), aliasing (4), grey (4), returned (4), importer (4), declared (4), take (4), query (4), semi (4), colon (4), copied (4), valid (4), solid (4), operators (4), equivalent (4), 555 (4), class2 (4), class1 (4), possible (4), instead (4), expressions (4), recursive (4), classes (4), callers (4), average (4), allows (4), exactly (4), 000 (4), webkit (4), names (4), param1 (4), examples (4), word (4), 900 (4), transform (4), myclass (4), thing2 (4), thing1 (4), duplication (4), 1023px (4), extending (4), interpolated (4), interpolation (4), replacement (4), doublequote (4), singlequote (4), noquote (4), looks (4), allowed (4), images (4), cyan (4), cancel (4), themes (4), usage (4), depth (4), language (3), documentation (3), under (3), section (3), loaded (3), https (3), com (3), urls (3), string (3), evaluation (3), immediately (3), retrieve (3), collection (3), store (3), part (3), lib1 (3), placing (3), produce (3), dimension (3), start (3), writing (3), module (3), work (3), within (3), combining (3), auto (3), original (3), 100px (3), undefined (3), doing (3), approach (3), unlike (3), typical (3), future (3), notice (3), append (3), mobile (3), selected (3), unlocked (3), unlocking (3), modify (3), gain (3), accessible (3), those (3), root (3), old (3), either (3), non (3), declarations (3), else (3), isnumber (3), operator (3), considered (3), truth (3), guarded (3), columns (3), create (3), dosomething (3), too (3), inherited (3), final (3), specify (3), allow (3), expected (3), darken (3), sometimes (3), 008000 (3), quote (3), commas (3), support (3), mix (3), f5f5f5 (3), mode (3), between (3), generated (3), info (3), detection (3), toplevel (3), ignores (3), screenclass (3), nothing (3), target (3), found (3), essentially (3), expression (3), form (3), elements (3), exact (3), every (3), must (3), below (3), gets (3), importing (3), external (3), extensions (3), treated (3), efefef (3), control (3), 428bca (3), guide (3), post (2), types (2), context (2), collections (2), tree (2), push (2), null (2), had (2), authors (2), lib2 (2), choose (2), third (2), named (2), added (2), conflicts (2), namely (2), operations (2), unit (2), otherwise (2), stylesheet (2), fine (2), written (2), require (2), exports (2), achieve (2), group (2), declaring (2), calling (2), around (2), module__another (2), module__element (2), defining (2), tips (2), tricks (2), intuitive (2), looking (2), languages (2), ice (2), cream (2), lunch (2), dessert (2), foods (2), whether (2), replace (2), entire (2), individual (2), emulate (2), produces (2), easier (2), little (2), ability (2), 768px (2), tablet (2), sizes (2), darkblue (2), option1 (2), starting (2), select (2), time (2), throws (2), copying (2), referencing (2), over (2), via (2), lastly (2), cannot (2), orientation (2), portrait (2), full (2), ie9 (2), 1200px (2), piece (2), supported (2), mandatory (2), followed (2), assign (2), evaluate (2), aliased (2), theme (2), specific (2), iscolor (2), basic (2), checking (2), combine (2), logical (2), queries (2), max (2), definitions (2), comparison (2), usable (2), additionally (2), making (2), ddd (2), run (2), lightness (2), arity (2), already (2), iteration (2), combined (2), various (2), loops (2), definedonlyinmixin (2), protected (2), exception (2), 33px (2), 16px (2), look (2), cascade (2), 888 (2), behave (2), differently (2), change (2), bound (2), advanced (2), special (2), efca44 (2), 33acfe (2), ways (2), param (2), semicolon (2), containing (2), escape (2), separators (2), break (2), mixed (2), unimportant (2), huge (2), required (2), existing (2), avoid (2), flag (2), 15deg (2), rotate (2), scale (2), inset (2), brown (2), classic (2), cases (2), everything (2), print (2), sheet (2), compile (2), able (2), orange (2), attribute (2), leading (2), star (2), uses (2), recognized (2), compiled (2), placed (2), bag (2), instances (2), compiling (2), regardless (2), compatible (2), known (2), places (2), modifying (2), process (2), pull (2), bootstrap (2), marked (2), appear (2), normal (2), depending (2), imports (2), unless (2), been (2), php (2), dotted (2), 366 (2), combinatorial (2), explosion (2), prepend (2), putting (2), changing (2), ish (2), represents (2), commonly (2), easily (2), brass (2), 999 (2), 0ee (2), tidal (2), wave (2), bold (2), weight (2), banner (2), fff (2), location (2), repo (2), changelog, compiler, mit, license, maintained, core, team, while, scenarios, load, parsing, starts, manager, npm, visitor, processor, clean, repos, showing, provides, methods, visitors, managers, processors, printusage, lessc, explain, terminal, minversion, minimum, compatibility, array, argumentstring, setoptions, passes, arbitrary, args, parsed, almost, lifecycle, should, export, imma, storing, longer, strings, numbers, latter, converted, anonymous, nodes, throw, assignment, kind, sharing, effectively, particular, cause, creates, party, libraries, adheres, great, functionality, introducing, naming, noticed, globals, registry, convenience, units, api, correct, proper, wanted, multiply, against, plain, purposes, 141592653589793, congratulations, etc, lot, basics, focus, commonjs, conventions, keep, mind, cross, platform, shimmed, registerplugin, since, quite, automatically, appends, javascript, actual, allowing, applied, syntactic, sugar, 25px, align, created, nest, wrong, vars, trick, keeping, preventing, leaking, credit, 1472, similarly, pushed, introduction, differs, higher, locally, obvious, produced, releases, intuitively, additional, far, rulset, pairs, appropriate, versatile, overload, 1024px, 320px, turn, lightblue, option2, gains, renaming, won, win, needed, sees, visibility, said, takes, precedence, unlocks, even, advantage, bubbling, defines, abstracts, out, wrapping, content, except, declare, stored, structure, going, ambiguous, always, purple, map, assigning, isunit, isem, ispercentage, ispixel, check, addition, isurl, iskeyword, isstring, negate, conditions, separating, compare, falsy, truthy, introduces, sequence, trying, stay, close, declarative, nature, opted, implement, conditional, execution, vein, specifications, opposed, familiar, functional, programming, probably, encountered, generic, grid, 30px, launch, next, iterative, structures, creating, finally, acts, globaly, protection, includes, present, local, cascading, averaging, unnamed, customize, overriding, selecting, faded, fade, bind, equal, didn, happened, lightened, darker, a2a2a2, lighten, furthermore, blur, deal, supply, positions, legal, overloading, dummy, trailing, seems, strange, prefer, paren, necessary, originally, passing, hide, invoke, 6px, 4px, mark, sp_2, sp_1, assumed, never, guaranteed, condition, reduces, user, organize, groups, legacy, whitespace, complicated, stack, ids, historically, release, unintentional, joins, requires, explicit, join, pending, aggregating, alternative, blocks, relate, areas, copy, lead, unnecessary, therefore, move, wish, leads, reducing, simplified, subtype, overrides, firstly, including, ignore, think, operation, destructive, search, tells, replaced, treats, nostar, quotes, knows, shortcut, division, odd, ordinary, clauses, end, optionally, still, affect, onto, kept, isn, wherever, appears, merges, ones, references, exists, fileerror, stops, main, opposite, subsequent, regular, although, supports, standards, comments, hacks, related, targeted, implicit, pulled, position, method, imagine, marks, per, separate, keywords, continue, implemented, filename, offers, several, provide, flexibility, appended, included, standard, precede, doesn, care, sheets, expands, combinations, specified, permutation, done, modernizr, parentish, nearest, ancestor, linkish, makes, repeatedly, refer, repeating, variety, basically, repetitive, descendant, hovered, tags, typically, applying, loading, requests, afterwards, lighter, processing, very, much, twice, searching, upwards, determine, snippet, src, sand, 444, img, focused, sea, maintain, giving, uncommon, repeated, dozens, across, stylesheets, hundreds, installing, setting, environment, developing, quick, summary, about, tools, toggle, navigation,

Text of the page (random words):
bear bear a animal background color black color white bear extend animal background color brown reducing css size mixins copy all of the properties into a selector which can lead to unnecessary duplication therefore you can use extends instead of mixins to move the selector up to the properties you wish to use which leads to less css being generated example with mixin my inline block display inline block font size 0 thing1 my inline block thing2 my inline block outputs thing1 display inline block font size 0 thing2 display inline block font size 0 example with extends my inline block display inline block font size 0 thing1 extend my inline block thing2 extend my inline block outputs my inline block thing1 thing2 display inline block font size 0 combining styles a more advanced mixin another use case is as an alternative for a mixin because mixins can only be used with simple selectors if you have two different blocks of html but need to apply the same styles to both you can use extends to relate two areas example li list a list styles button list style extend li list a use the same list styles merge properties edit the markdown source for merge combine properties the merge feature allows for aggregating values from multiple properties into a comma or space separated list under a single property merge is useful for properties such as background and transform comma append property value with comma released v1 5 0 example mixin box shadow inset 0 0 10px 555 myclass mixin box shadow 0 0 20px black outputs myclass box shadow inset 0 0 10px 555 0 0 20px black space append property value with space released v1 7 0 example mixin transform _ scale 2 myclass mixin transform _ rotate 15deg outputs myclass transform scale 2 rotate 15deg to avoid any unintentional joins merge requires an explicit or _ flag on each join pending declaration mixins edit the markdown source for mixins mix in properties from existing styles you can mix in class selectors and id selectors e g a b color red mixin class a mixin id b which results in a b color red mixin class color red mixin id color red historically the parentheses in a mixin call are optional but optional parentheses are deprecated and will be required in a future release a a currently works but deprecated don t use a white space before parentheses is also deprecated mixins with parentheses if you want to create a mixin but you do not want that mixin to be in your css output put parentheses after the mixin definition my mixin color black my other mixin background white class my mixin my other mixin outputs my mixin color black class color black background white selectors in mixins mixins can contain more than just properties they can contain selectors too for example my hover mixin hover border 1px solid red button my hover mixin outputs button hover border 1px solid red namespaces if you want to mixin properties inside a more complicated selector you can stack up multiple ids or classes outer inner color red c outer inner note legacy less syntax allows and whitespace between namespaces and mixins this syntax is deprecated and may be removed currently these do the same thing outer inner deprecated outer inner deprecated outer inner preferred namespacing your mixins like this reduces conflicts with other library mixins or user mixins but can also be a way to organize groups of mixins example my library my mixin color black which can be used like this class my library my mixin guarded namespaces if a namespace has a guard mixins defined by it are used only if the guard condition returns true a namespace guard is evaluated exactly the same as a guard on a mixin so the following two mixins work the same way namespace when mode huge mixin namespace mixin when mode huge the default function is assumed to have the same value for all nested namespaces and mixin the following mixin is never evaluated one of its guards is guaranteed to be false sp_1 when default sp_2 when default mixin when not default the important keyword use the important keyword after mixin call to mark all properties inherited by it as important example foo bg f5f5f5 color 900 background bg color color unimportant foo important foo important results in unimportant background f5f5f5 color 900 important background f5f5f5 important color 900 important parametric mixins edit the markdown source for mixins parametric how to pass arguments to mixins mixins can also take arguments which are variables passed to the block of selectors when it is mixed in for example border radius radius webkit border radius radius moz border radius radius border radius radius and here s how we can mix it into various rulesets header border radius 4px button border radius 6px parametric mixins can also have default values for their parameters border radius radius 5px webkit border radius radius moz border radius radius border radius radius we can invoke it like this now header border radius and it will include a 5px border radius you can also use parametric mixins which don t take parameters this is useful if you want to hide the ruleset from the css output but want to include its properties in other rulesets wrap text wrap wrap white space moz pre wrap white space pre wrap word wrap break word pre wrap which would output pre text wrap wrap white space moz pre wrap white space pre wrap word wrap break word parameter separators parameters are currently either semicolon or comma separated originally parameters were only separated by commas but the semi colon was later added to support passing comma separated list values to single arguments note as of less 4 0 you can wrap a list value using a paren escape e g name param1 red blue this is similar to the quote escape syntax quote this may make semi colon separators un necessary in your code base examples two arguments and each contains comma separated list name 1 2 3 something else three arguments and each contains one number name 1 2 3 use a dummy semicolon to create a mixin call with one argument containing a comma separated css list name 1 2 3 note if the trailing semi colon seems strange you may prefer name 1 2 3 ways to write a comma separated default value param values red blue name param1 param values name param1 red blue name param1 red blue overloading mixins it is legal to define multiple mixins with the same name and number of parameters less will use properties of all that can apply if you used the mixin with one parameter e g mixin green then properties of all mixins with exactly one mandatory parameter will be used mixin color color 1 color mixin color padding 2 color 2 color padding 2 padding mixin color padding margin 2 color 3 color padding 3 padding margin margin margin margin margin some selector div mixin 008000 compiles into some selector div color 1 008000 color 2 008000 padding 2 2 named parameters a mixin reference can supply parameters values by their names instead of just positions any parameter can be referenced by its name and they do not have to be in any special order mixin color black margin 10px padding 20px color color margin margin padding padding class1 mixin margin 20px color 33acfe class2 mixin efca44 padding 40px compiles into class1 color 33acfe margin 20px padding 20px class2 color efca44 margin 10px padding 40px the arguments variable arguments has a special meaning inside mixins it contains all the arguments passed when the mixin was called this is useful if you don t want to deal with individual parameters box shadow x 0 y 0 blur 1px color 000 webkit box shadow arguments moz box shadow arguments box shadow arguments big block box shadow 2px 5px which results in big block webkit box shadow 2px 5px 1px 000 moz box shadow 2px 5px 1px 000 box shadow 2px 5px 1px 000 advanced arguments and the rest variable you can use if you want your mixin to take a variable number of arguments using this after a variable name will assign those arguments to the variable mixin matches 0 n arguments mixin matches exactly 0 arguments mixin a 1 matches 0 1 arguments mixin a 1 matches 0 n arguments mixin a matches 1 n arguments furthermore mixin a rest rest is bound to arguments after a arguments is bound to all arguments pattern matching sometimes you may want to change the behavior of a mixin based on the parameters you pass to it let s start with something basic mixin s color class mixin switch 888 now let s say we want mixin to behave differently based on the value of switch we could define mixin as such mixin dark color color darken color 10 mixin light color color lighten color 10 mixin _ color display block now if we run switch light class mixin switch 888 we will get the following css class color a2a2a2 display block where the color passed to mixin was lightened if the value of switch was dark the result would be a darker color here s what happened the first mixin definition didn t match because it expected dark as the first argument the second mixin definition matched because it expected light the third mixin definition matched because it expected any value only mixin definitions which matched were used variables match and bind to any value anything other than a variable matches only with a value equal to itself we can also match on arity here s an example mixin a color a mixin a b color fade a b now if we call mixin with a single argument we will get the output of the first definition but if we call it with two arguments we will get the second definition namely a faded to b using mixins as functions edit the markdown source for mixins as functions selecting properties and variables from mixin calls property value accessors released v3 5 0 starting in less 3 5 you can use property variable accessors to select a value from an evaluated mixin s rules this can allow you to use mixins similar to functions example average x y result x y 2 div call a mixin and look up its result value padding average 16px 50px result results in div padding 33px overriding mixin values if you have multiple matching mixins all rules are evaluated and merged and the last matching value with that identifier is returned this is similar to the cascade in css and it allows you to override mixin values library less library mixin prop foo customize less import library library mixin prop bar box my value library mixin prop outputs box my value bar unnamed lookups if you don t specify a lookup value in lookup and instead write after a mixin or ruleset call all values will cascade and the last declared value will be selected meaning the averaging mixin from the above example could be written as average x y result x y 2 div call a mixin and look up its final value padding average 16px 50px the output is the same div padding 33px the same cascading behavior is true for rulesets or variables aliased to mixin calls dr value foo box my value dr this outputs box my value foo unlocking mixins variables into caller scope deprecated use property value accessors variables and mixins defined in a mixin are visible and can be used in caller s scope there is only one exception a variable is not copied if the caller contains a variable with the same name that includes variables defined by another mixin call only variables present in callers local scope are protected variables inherited from parent scopes are overridden note this behavior is deprecated and in the future variables and mixins will not be merged into the caller scope in this way example mixin width 100 height 200px caller mixin width width height height results in caller width 100 height 200px variables defined directly in callers scope cannot be overridden however variables defined in callers parent scope is not protected and will be overridden mixin size in mixin definedonlyinmixin in mixin class margin size definedonlyinmixin mixin size globaly defined value callers parent scope no protection results in class margin in mixin in mixin finally mixin defined in mixin acts as return value too unlock value outer mixin dosomething nested mixin declaration value namespace unlock 5 unlock dosomething mixin dosomething nested mixin was copied here and is usable results in namespace declaration 5 recursive mixins edit the markdown source for mixin loops creating loops in less a mixin can call itself such recursive mixins when combined with guard expressions and pattern matching can be used to create various iterative loop structures example loop counter when counter 0 loop counter 1 next iteration width 10px counter code for each iteration div loop 5 launch the loop output div width 10px width 20px width 30px width 40px width 50px a generic example of using a recursive loop to generate css grid classes generate columns 4 generate columns n i 1 when i n column i width i 100 n generate columns n i 1 output column 1 width 25 column 2 width 50 column 3 width 75 column 4 width 100 mixin guards edit the markdown source for mixin guards guards are useful when you want to match on expressions as opposed to simple values or arity if you are familiar with functional programming you have probably encountered them already in trying to stay as close as possible to the declarative nature of css less has opted to implement conditional execution via guarded mixins instead of if else statements in the vein of media query feature specifications let s start with an example mixin a when lightness a 50 background color black mixin a when lightness a 50 background color white mixin a color a the key is the when keyword which introduces a guard sequence here with only one guard now if we run the following code class1 mixin ddd class2 mixin 555 here s what we ll get class1 background color black color ddd class2 background color white color 555 guard comparison operators the full list of comparison operators usable in guards are additionally the keyword true is the only truthy value making these two mixins equivalent truth a when a truth a when a true any value other than the keyword true is falsy class truth 40 will not match any of the above definitions note that you can also compare arguments with each other or with non arguments media mobile mixin a when media mobile mixin a when media desktop max a b when a b width a max a b when a b width b guard logical operators you can use logical operators with guards the syntax is based on css media queries use the and keyword to combine guards mixin a when isnumber a and a 0 you can emulate the or operator by separating guards with a comma if any of the guards evaluate to true it s considered a match mixin a when a 10 a 10 use the not keyword to negate conditions mixin b when not b 0 type checking functions lastly if you want to match mixins based on value type you can use the is functions mixin a b 0 when isnumber b mixin a b black when iscolor b here are the basic type checking functions iscolor isnumber isstring iskeyword isurl if you want to check if a value is in a specific unit in addition to being a number you may use one of ispixel isp...

Images from subpage: "lesscss.org/TODO" Verify