lix-website/themes/lix/assets/bootstrap/node_modules/postcss-less/README.md

151 lines
3.6 KiB
Markdown
Raw Normal View History

2024-04-27 03:39:10 +00:00
[tests]: https://img.shields.io/circleci/project/github/shellscape/postcss-less.svg
[tests-url]: https://circleci.com/gh/shellscape/postcss-less
[cover]: https://codecov.io/gh/shellscape/postcss-less/branch/master/graph/badge.svg
[cover-url]: https://codecov.io/gh/shellscape/postcss-less
[size]: https://packagephobia.now.sh/badge?p=postcss-less
[size-url]: https://packagephobia.now.sh/result?p=postcss-less
[PostCSS]: https://github.com/postcss/postcss
[PostCSS-SCSS]: https://github.com/postcss/postcss-scss
[LESS]: http://lesless.org
[Autoprefixer]: https://github.com/postcss/autoprefixer
[Stylelint]: http://stylelint.io/
# postcss-less
[![tests][tests]][tests-url]
[![cover][cover]][cover-url]
[![size][size]][size-url]
A [PostCSS] Syntax for parsing [LESS]
_Note: This module requires Node v6.14.4+. `poscss-less` is not a LESS compiler. For compiling LESS, please use the official toolset for LESS._
## Install
Using npm:
```console
npm install postcss-less --save-dev
```
<a href="https://www.patreon.com/shellscape">
<img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
</a>
Please consider [becoming a patron](https://www.patreon.com/shellscape) if you find this module useful.
## Usage
The most common use of `postcss-less` is for applying PostCSS transformations directly to LESS source. eg. ia theme written in LESS which uses [Autoprefixer] to add appropriate vendor prefixes.
```js
const syntax = require('postcss-less');
postcss(plugins)
.process(lessText, { syntax: syntax })
.then(function (result) {
result.content // LESS with transformations
});
```
## LESS Specific Parsing
### `@import`
Parsing of LESS-specific `@import` statements and options are supported.
```less
@import (option) 'file.less';
```
The AST will contain an `AtRule` node with:
- an `import: true` property
- a `filename: <String>` property containing the imported filename
- an `options: <String>` property containing any [import options](http://lesscss.org/features/#import-atrules-feature-import-options) specified
### Inline Comments
Parsing of single-line comments in CSS is supported.
```less
:root {
// Main theme color
--color: red;
}
```
The AST will contain a `Comment` node with an `inline: true` property.
### Mixins
Parsing of LESS mixins is supported.
```less
.my-mixin {
color: black;
}
```
The AST will contain an `AtRule` node with a `mixin: true` property.
#### `!important`
Mixins that declare `!important` will contain an `important: true` property on their respective node.
### Variables
Parsing of LESS variables is supported.
```less
@link-color: #428bca;
```
The AST will contain an `AtRule` node with a `variable: true` property.
_Note: LESS variables are strictly parsed - a colon (`:`) must immediately follow a variable name._
## Stringifying
To process LESS code without PostCSS transformations, custom stringifier
should be provided.
```js
const postcss = require('postcss');
const syntax = require('postcss-less');
const less = `
// inline comment
.container {
.mixin-1();
.mixin-2;
.mixin-3 (@width: 100px) {
width: @width;
}
}
.rotation(@deg:5deg){
.transform(rotate(@deg));
}
`;
const result = await postcss().process(less, { syntax });
// will contain the value of `less`
const { content } = result;
```
## Use Cases
- Lint LESS code with 3rd-party plugins.
- Apply PostCSS transformations (such as [Autoprefixer](https://github.com/postcss/autoprefixer)) directly to the LESS source code
## Meta
[CONTRIBUTING](./.github/CONTRIBUTING)
[LICENSE (MIT)](./LICENSE)