This commit is contained in:
Tomas Dvorak
2026-02-24 10:33:59 +01:00
parent 409acd2e08
commit 898a3c303f
1374 changed files with 290409 additions and 29187 deletions
+17
View File
@@ -0,0 +1,17 @@
{
"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"
}