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):
ions reference inline less css once multiple optional extend extend syntax extend attached to selector extend inside ruleset extending nested selectors exact matching with extend nth expression extend all selector interpolation with extend scoping extend inside media duplication detection use cases for extend merge properties comma space mixins mixins with parentheses selectors in mixins namespaces guarded namespaces the important keyword parametric mixins pattern matching using mixins as functions recursive mixins mixin guards aliasing mixins detached rulesets scoping property variable accessors maps using variable variables in lookups scope mixin scope features deprecated mixin scope features tips tricks css guards plugin at rules writing your first plugin plugin scope null functions the less js plugin object pre loaded plugins toggle navigation overview using less js functions in depth guide tools about github docs repo docs issues less repo less issues overview edit the markdown source for overview an in depth guide to features of the less language see the overview for a quick summary of less for an in depth guide to installing and setting up a less environment as well as documentation on developing for less see using less js variables edit the markdown source for variables control commonly used values in a single location overview it s not uncommon to see the same value repeated dozens if not hundreds of times across your stylesheets a link color 428bca widget color fff background 428bca variables make your code easier to maintain by giving you a way to control those values from a single location variables link color 428bca sea blue link color hover darken link color 10 usage a link color link color a hover color link color hover widget color fff background link color variable interpolation the examples above focused on using variables to control values in css rules but they can also be used in other places as well such as selector names property names urls and import statements selectors v1 4 0 variables my selector banner usage my selector font weight bold line height 40px margin 0 auto compiles to banner font weight bold line height 40px margin 0 auto urls variables images img usage body color 444 background url images white sand png import statements v1 4 0 syntax import themes tidal wave less note that before v2 0 0 only variables which have been declared in the root or current scope were considered and that only the current file and calling files were considered when looking for a variable example variables themes src themes usage import themes tidal wave less properties v1 6 0 property color widget property 0ee background property 999 compiles to widget color 0ee background color 999 variable variables in less you can define a variable s name using another variable primary green secondary blue section color primary element color color which compiles to section element color green lazy evaluation variables do not have to be declared before being used valid less snippet lazy eval width var var a a 9 this is valid less too lazy eval width var a 9 var a a 100 both compile into lazy eval width 9 when defining a variable twice the last definition of the variable is used searching from the current scope upwards this is similar to css itself where the last property inside a definition is used to determine the value for instance var 0 class var 1 brass var 2 three var var 3 one var compiles to class one 1 class brass three 3 essentially each scope has a final value similar to properties in the browser like this example using custom properties header color white color var color the color is black color black this means that unlike other css pre processing languages less variables behave very much like css s properties as variables new v3 0 0 you can easily treat properties like variables using the prop syntax sometimes this can make your code a little lighter widget color efefef background color color compiles to widget color efefef background color efefef note that like variables less will choose the last property within the current parent scope as being the final value block color red inner background color color color blue compiles to block color red color blue block inner background color blue default variables we sometimes get requests for default variables an ability to set a variable only if it is not already set this feature is not required because you can easily override a variable by putting the definition afterwards for instance library base color green dark color darken base color 10 use of library import library less base color red this works fine because of lazy loading base color is overridden and dark color is a dark red parent selectors edit the markdown source for parent selectors referencing parent selectors with the operator represents the parent selectors of a nested rule and is most commonly used when applying a modifying class or pseudo class to an existing selector a color blue hover color green results in a color blue a hover color green notice that without the the above example would result in a hover rule a descendant selector that matches hovered elements inside of a tags and this is not what we typically would want with the nested hover the parent selectors operator has a variety of uses basically any time you need the selectors of the nested rules to be combined in other ways than the default for example another typical use of the is to produce repetitive class names button ok background image url ok png cancel background image url cancel png custom background image url custom png output button ok background image url ok png button cancel background image url cancel png button custom background image url custom png multiple may appear more than once within a selector this makes it possible to repeatedly refer to a parent selector without repeating its name link color red color green color blue ish color cyan will output link link color red link link color green link link color blue link linkish color cyan note that represents all parent selectors not just the nearest ancestor so the following example grand parent color red color green color blue ish color cyan results in grand parent grand parent color red grand parent grand parent color green grand parent grand parent color blue grand parent grand parentish color cyan changing selector order it can be useful to prepend a selector to the inherited parent selectors this can be done by putting the after current selector for example when using modernizr you might want to specify different rules based on supported features header menu border radius 5px no borderradius background image url images button background png the selector no borderradius will prepend no borderradius to its parent header menu to form the no borderradius header menu on output header menu border radius 5px no borderradius header menu background image url images button background png combinatorial explosion can also be used to generate every possible permutation of selectors in a comma separated list p a ul li border top 2px dotted 366 border top 0 this expands to all possible 16 combinations of the specified elements p a ul li border top 2px dotted 366 p p p a p ul p li a p a a a ul a li ul p ul a ul ul ul li li p li a li ul li li border top 0 import at rules edit the markdown source for imports import styles from other style sheets in standard css import at rules must precede all other types of rules but less doesn t care where you put import statements example foo background 900 import this is valid less file extensions import statements may be treated differently by less depending on the file extension if the file has a css extension it will be treated as css and the import statement left as is see the inline option below if it has any other extension it will be treated as less and imported if it does not have an extension less will be appended and it will be included as a imported less file examples import foo foo less is imported import foo less foo less is imported import foo php foo php imported as a less file import foo css statement left in place as is the following options can be used to override this behavior import options less offers several extensions to the css import css at rule to provide more flexibility over what you can do with external files syntax import keyword filename the following import options have been implemented reference use a less file but do not output it inline include the source file in the output but do not process it less treat the file as a less file no matter what the file extension css treat the file as a css file no matter what the file extension once only include the file once this is default behavior multiple include the file multiple times optional continue compiling when file is not found more than one keyword per import is allowed you will have to use commas to separate the keywords example import optional reference foo less reference use import reference to import external files but without adding the imported styles to the compiled output unless referenced released v1 5 0 example import reference foo less imagine that reference marks every at rule and selector with a reference flag in the imported file imports as normal but when the css is generated reference selectors as well as any media queries containing only reference selectors are not output reference styles will not show up in your generated css unless the reference styles are used as mixins or extended additionally reference produces different results depending on which method was used mixin or extend extend when a selector is extended only the new selector is marked as not referenced and it is pulled in at the position of the reference import statement mixins when a reference style is used as an implicit mixin its rules are mixed in marked not reference and appear in the referenced place as normal reference example this allows you to pull in only specific targeted styles from a library such as bootstrap by doing something like this navbar extend navbar all and you will pull in only navbar related styles from bootstrap inline use import inline to include external files but not process them released v1 5 0 example import inline not less compatible css you will use this when a css file may not be less compatible this is because although less supports most known standards css it does not support comments in some places and does not support all known css hacks without modifying the css so you can use this to include the file in the output so that all css will be in one file less use import less to treat imported files as less regardless of file extension released v1 4 0 example import less foo css css use import css to treat imported files as regular css regardless of file extension this means the import statement will be left as it is released v1 4 0 example import css foo less outputs import foo less once the default behavior of import statements it means the file is imported only once and subsequent import statements for that file will be ignored released v1 4 0 this is the default behavior of import statements example import once foo less import once foo less this statement will be ignored multiple use import multiple to allow importing of multiple files with the same name this is the opposite behavior to once released v1 4 0 example file foo less a color green file main less import multiple foo less import multiple foo less outputs a color green a color green optional use import optional to allow importing of a file only when it exists without the optional keyword less throws a fileerror and stops compiling when importing a file that can not be found released v2 3 0 extend edit the markdown source for extend extend is a less pseudo class which merges the selector it is put on with ones that match what it references released v1 4 0 nav ul extend inline background blue in the rule set above the extend selector will apply the extending selector nav ul onto the inline class wherever the inline class appears the declaration block will be kept as is but without any reference to the extend because extend isn t css so the following nav ul extend inline background blue inline color red outputs nav ul background blue inline nav ul color red notice how the nav ul extend inline selector gets output as nav ul the extend gets removed before output and the selector block left as is if no properties are put in that block then it gets removed from the output but the extend still may affect other selectors extend syntax the extend is either attached to a selector or placed into a ruleset it looks like a pseudo class with selector parameter optionally followed by the keyword all example a extend b the above block does the same thing as the below block a extend b c extend d all extends all instances of d e g x d or d x c extend d extends only instances where the selector will be output as just d it can contain one or more classes to extend separated by commas example e extend f e extend g the above and the below do the same thing e extend f g extend attached to selector extend attached to a selector looks like an ordinary pseudo class with selector as a parameter a selector can contain multiple extend clauses but all extends must be at the end of the selector extend after the selector pre hover extend div pre space between selector and extend is allowed pre hover extend div pre multiple extends are allowed pre hover extend div pre extend bucket tr note this is the same as pre hover extend div pre bucket tr this is not allowed pre hover extend div pre nth child odd extend must be last if a ruleset contains multiple selectors any of them can have the extend keyword multiple selectors with extend in one ruleset big division big bag extend bag big bucket extend bucket body extend inside ruleset extend can be placed into a ruleset s body using extend selector syntax placing extend into a body is a shortcut for placing it into every single selector of that ruleset extend inside a body pre hover some class extend div pre is exactly the same as adding an extend after each selector pre hover extend div pre some class extend div pre extending nested selectors extend is able to match nested selectors following less example bucket tr nested ruleset with target selector color blue some class extend bucket tr nested ruleset is recognized outputs bucket tr some class color blue essentially the extend looks at the compiled css not the original less example bucket tr nested ruleset with target selector color blue some class extend tr bucket nested ruleset is recognized outputs tr bucket some class color blue exact matching with extend extend by default looks for exact match between selectors it does matter whether selector uses leading star or not it does not matter that two nth expressions have the same meaning they need to have to same form in order to be matched the only exception are quo...
|
