{
  "id": "5de5a9f8daa1fbadc9a15fa1",
  "source": "solid:signals",
  "type": "github-document",
  "title": "less",
  "content": "---\ntitle: LESS\norder: 2\nmainNavExclude: true\nuse_cases: \u003e-\n  css preprocessing, style variables, mixins, nested styles, programmatic\n  styling\ntags:\n  - styling\n  - less\n  - preprocessor\n  - variables\n  - mixins\n  - css\nversion: '1.0'\ndescription: \u003e-\n  Integrate LESS preprocessor in Solid apps for variables, mixins, and\n  programmatic CSS features to write cleaner stylesheets.\n---\n\n[LESS](https://lesscss.org/) is a preprocessor based on JavaScript.\nIt provides the ability to use mixins, variables, and other programmatic tools, making styling code cleaner and less redundant.\n\n## Installation\n\nTo utilize LESS in a Solid app, it will need to be installed as a development dependency:\n\n```package-install-dev\nless\n```\n\n## Using LESS in your app\n\nStart by creating a `.less` file in the `src` directory:\n\n```less\n//styles.less\n.foo {\n\tcolor: red;\n}\n.bar {\n\tbackground-color: blue;\n}\n```\n\nThe basic syntax of LESS is very similar to CSS.\nHowever, LESS allows the declaration and usage of variables:\n\n```less\n//styles.less\n@plainred: red;\n@plainblue: blue;\n.foo {\n\tcolor: @plainred;\n}\n.bar {\n\tbackground-color: @plainblue;\n}\n```\n\nTo use these styles in a Solid component, import the `.less` file:\n\n```jsx\n//component.jsx\nimport \"./styles.less\";\n\nfunction Component() {\n\treturn (\n\t\t\u003c\u003e\n\t\t\t\u003cdiv class=\"foo bar\"\u003eHello, world!\u003c/div\u003e\n\t\t\u003c/\u003e\n\t);\n}\n```\n\nBy changing the file extension of the imported styles to `.less`, Vite will recognize it as a LESS file and compile it to CSS on demand.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/guides/styling-components/less.mdx",
  "metadata": {
    "path": "src/routes/guides/styling-components/less.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 1484,
    "source_type": "github"
  },
  "hash": "3e467b91b1a60bc4f09f645d15aa70d98efe80422f92c5749f22dfc859e568ab",
  "timestamp": "2026-02-23T11:43:00.187970268+01:00"
}