Skip to main content

Less

Less (Leaner Style Sheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, functions and operations. It uses a CSS-like syntax with curly braces and semicolons, so every valid CSS stylesheet is also valid Less.

Demo​

show code
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Hello, Less!</h1>\n  <p>This is styled with <strong>Less</strong>.</p>\n  <ul class=\"features\">\n    <li>Variables</li>\n    <li>Nesting</li>\n    <li>Mixins</li>\n  </ul>\n</div>\n"
    },
    "style": {
      "language": "less",
      "content": "@primary: #3182ce;\n@bg: #f0f4f8;\n@radius: 8px;\n\n.flex-center() {\n  display: flex;\n  gap: 1em;\n}\n\n.container {\n  font-family: sans-serif;\n  max-width: 600px;\n  margin: 2em auto;\n  padding: 1.5em;\n  border-radius: @radius;\n  background: @bg;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n\n  h1 {\n    color: #2d3748;\n  }\n\n  p {\n    color: #4a5568;\n    line-height: 1.6;\n  }\n}\n\n.features {\n  .flex-center();\n  list-style: none;\n  padding: 0;\n\n  li {\n    background: @primary;\n    color: white;\n    padding: 0.5em 1em;\n    border-radius: @radius;\n  }\n}\n"
    }
  }
};
createPlayground('#container', options);

Usage​

Less code added to the style editor is compiled to CSS before being added to the result page.

Less uses a CSS-like syntax with curly braces and semicolons. Variables are prefixed with @, and mixins let you reuse groups of declarations.

For more details about CSS support in LiveCodes, including CSS processors, style imports, CSS modules, and CSS frameworks, see the CSS feature documentation.

Loading External Styles​

Less supports importing external stylesheets using the @import rule. Bare module specifiers are resolved to full CDN URLs.

@import 'bootstrap/less/bootstrap';
tip

For more information about loading and importing styles, see the Style Imports documentation.

Language Info​

Name​

less

Extensions​

.less

Editor​

style

Compiler​

Less is compiled using the official Less.js compiler (running in the browser).

Custom Settings​

Custom settings added to the property less are passed as a JSON object to the Less compiler during compile. Please check the Less options documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "less": {
    "math": "strict"
  }
}

Code Formatting​

Using Prettier.

Sponsors