Contents
Less
A CSS preprocessor: variables, nesting, mixins, operations and functions.
1.Getting started
- What Less isWhat the Less preprocessor is, how it turns its code into plain CSS and where it is used today.
- Installing and compilingHow to install Less with npm, compile a file with lessc and recompile it on every save with npm scripts.
- Less with ViteHow to use Less in a Vite project: installing the less package, importing a .less file and building for production.
2.Language basics
- VariablesLess variables with the @ sign, their scope and lazy evaluation: the last definition wins.
- Nesting and &Nested Less rules, the & parent reference for states and modifiers, and media queries inside a rule.
- Operations and unitsAddition, subtraction, multiplication and division in Less, working with units, parentheses for division and math functions.
- Strings, escaping and interpolationEscaping with a tilde for values Less should not parse, inserting variables into selectors and strings, and string functions.
- Colour functionsBuilt-in Less functions for working with colour: darken, lighten, fade, mix, tint, shade, spin and contrast.
3.Mixins
- MixinsLess mixins: a class as a set of declarations, a mixin with parentheses that does not reach the CSS, and calling with !important.
- Mixins with parametersParameters of Less mixins: default values, named arguments, the semicolon as a separator and the @arguments variable.
- Pattern matchingSeveral mixins with one name: choosing by the argument value, by the number of arguments, and mixins with a variable number of parameters.
- GuardsConditions in Less: when on mixins, comparison operators, the type-checking functions iscolor and isnumber, default() and conditions on rules.
- Namespaces and mapsHow to group mixins into a #name namespace and keep settings in Less maps with key access @map[key].
4.Files and reuse
- Importing filesHow to split styles into files with @import and what the import options reference, inline, once, multiple and optional do.
- Extending with :extendThe :extend pseudo-class in Less: adding a selector to an existing rule instead of copying declarations, the all keyword and the difference from a mixin.
- Detached rulesetsA set of declarations in a Less variable, calling it with parentheses and passing a block of styles to a mixin, for example for media queries.
- Lists and loopsLists in Less and the length, extract and range functions, loops with a recursive mixin, and the each function for lists and maps.
5.Less in practice
- Plugins and JavaScriptHow to add your own function to Less with a JavaScript plugin, use a ready-made plugin from npm and why inline JavaScript is disabled by default.
- Organising a projectHow to arrange Less styles into folders, in which order to import files in main.less and how to override theme variables.
- Less and CSS custom propertiesHow to combine Less variables with --name custom properties: outputting tokens to :root, a dark theme and the limits of colour functions.
- Moving from Less to Sass or CSSHow to move styles from Less to Sass or to plain CSS with custom properties and nesting: a table of equivalents and a working order.