Software zum Installieren eines Smart-Mirror Frameworks , zum Nutzen von hochschulrelevanten Informationen, auf einem Raspberry-Pi.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 3.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150
  1. [tests]: https://img.shields.io/circleci/project/github/shellscape/postcss-less.svg
  2. [tests-url]: https://circleci.com/gh/shellscape/postcss-less
  3. [cover]: https://codecov.io/gh/shellscape/postcss-less/branch/master/graph/badge.svg
  4. [cover-url]: https://codecov.io/gh/shellscape/postcss-less
  5. [size]: https://packagephobia.now.sh/badge?p=postcss-less
  6. [size-url]: https://packagephobia.now.sh/result?p=postcss-less
  7. [PostCSS]: https://github.com/postcss/postcss
  8. [PostCSS-SCSS]: https://github.com/postcss/postcss-scss
  9. [LESS]: http://lesless.org
  10. [Autoprefixer]: https://github.com/postcss/autoprefixer
  11. [Stylelint]: http://stylelint.io/
  12. # postcss-less
  13. [![tests][tests]][tests-url]
  14. [![cover][cover]][cover-url]
  15. [![size][size]][size-url]
  16. A [PostCSS] Syntax for parsing [LESS]
  17. _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._
  18. ## Install
  19. Using npm:
  20. ```console
  21. npm install postcss-less --save-dev
  22. ```
  23. <a href="https://www.patreon.com/shellscape">
  24. <img src="https://c5.patreon.com/external/logo/become_a_patron_button@2x.png" width="160">
  25. </a>
  26. Please consider [becoming a patron](https://www.patreon.com/shellscape) if you find this module useful.
  27. ## Usage
  28. 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.
  29. ```js
  30. const syntax = require('postcss-less');
  31. postcss(plugins)
  32. .process(lessText, { syntax: syntax })
  33. .then(function (result) {
  34. result.content // LESS with transformations
  35. });
  36. ```
  37. ## LESS Specific Parsing
  38. ### `@import`
  39. Parsing of LESS-specific `@import` statements and options are supported.
  40. ```less
  41. @import (option) 'file.less';
  42. ```
  43. The AST will contain an `AtRule` node with:
  44. - an `import: true` property
  45. - a `filename: <String>` property containing the imported filename
  46. - an `options: <String>` property containing any [import options](http://lesscss.org/features/#import-atrules-feature-import-options) specified
  47. ### Inline Comments
  48. Parsing of single-line comments in CSS is supported.
  49. ```less
  50. :root {
  51. // Main theme color
  52. --color: red;
  53. }
  54. ```
  55. The AST will contain a `Comment` node with an `inline: true` property.
  56. ### Mixins
  57. Parsing of LESS mixins is supported.
  58. ```less
  59. .my-mixin {
  60. color: black;
  61. }
  62. ```
  63. The AST will contain an `AtRule` node with a `mixin: true` property.
  64. #### `!important`
  65. Mixins that declare `!important` will contain an `important: true` property on their respective node.
  66. ### Variables
  67. Parsing of LESS variables is supported.
  68. ```less
  69. @link-color: #428bca;
  70. ```
  71. The AST will contain an `AtRule` node with a `variable: true` property.
  72. _Note: LESS variables are strictly parsed - a colon (`:`) must immediately follow a variable name._
  73. ## Stringifying
  74. To process LESS code without PostCSS transformations, custom stringifier
  75. should be provided.
  76. ```js
  77. const postcss = require('postcss');
  78. const syntax = require('postcss-less');
  79. const less = `
  80. // inline comment
  81. .container {
  82. .mixin-1();
  83. .mixin-2;
  84. .mixin-3 (@width: 100px) {
  85. width: @width;
  86. }
  87. }
  88. .rotation(@deg:5deg){
  89. .transform(rotate(@deg));
  90. }
  91. `;
  92. const result = await postcss().process(less, { syntax });
  93. // will contain the value of `less`
  94. const { content } = result;
  95. ```
  96. ## Use Cases
  97. - Lint LESS code with 3rd-party plugins.
  98. - Apply PostCSS transformations (such as [Autoprefixer](https://github.com/postcss/autoprefixer)) directly to the LESS source code
  99. ## Meta
  100. [CONTRIBUTING](./.github/CONTRIBUTING)
  101. [LICENSE (MIT)](./LICENSE)