devel:less
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:less [2021-12-30 13:18] – [Online Compiler] removed. lesserphp has no online demo schplurtz | devel:less [2024-01-01 19:57] (current) – [Insert Unparsed Code] FIXME add code examples Klap-in | ||
---|---|---|---|
Line 1: | Line 1: | ||
====== LESS CSS Support in DokuWiki ====== | ====== LESS CSS Support in DokuWiki ====== | ||
- | This is available since release 2013-12-08 " | + | This is available since release 2013-12-08 "[[: |
LESS is a dynamic stylesheet language that compiles to CSS. It offers new mechanisms like variables, nesting, mixins, operators and functions when writing stylesheets. | LESS is a dynamic stylesheet language that compiles to CSS. It offers new mechanisms like variables, nesting, mixins, operators and functions when writing stylesheets. | ||
- | DokuWiki' | + | DokuWiki' |
LESS statements are parsed in '' | LESS statements are parsed in '' | ||
+ | |||
===== LESS Language Constructs | ===== LESS Language Constructs | ||
- | Please refer to the official [[https:// | + | Please refer to the official [[https:// |
===== Style Guide ===== | ===== Style Guide ===== | ||
Line 21: | Line 22: | ||
===== Accessing style.ini placeholders ===== | ===== Accessing style.ini placeholders ===== | ||
- | [[style.ini]] placeholders are available in your styles as LESS variables, prefixed with '' | + | [[style.ini]] placeholders are available in your styles as LESS variables, prefixed with '' |
- | Eg. the '' | + | E.g. the '' |
===== Version of lesserphp ===== | ===== Version of lesserphp ===== | ||
- | At the moment (current date: 2021-12-30) the newest version of lesserphp is 0.5.5, which is included in DokuWiki " | + | At the moment (current date: 2021-12-30) the newest version of lesserphp is 0.5.5, which is included in DokuWiki "[[: |
Nevertheless you can achieve advanced technics, but less convenient. As shown in the following realization of an " | Nevertheless you can achieve advanced technics, but less convenient. As shown in the following realization of an " | ||
- | ===== How to realize an "IF-Statement"? ===== | + | ===== How to realize an “IF-Statement”? ===== |
This LESS-code: | This LESS-code: | ||
- | < | + | < |
@my-option: false; | @my-option: false; | ||
Line 50: | Line 51: | ||
.my-optional-style(); | .my-optional-style(); | ||
- | |||
</ | </ | ||
compiles to this CSS-code: | compiles to this CSS-code: | ||
- | < | + | < |
#main_body { | #main_body { | ||
background-color: | background-color: | ||
Line 67: | Line 67: | ||
===== Insert Unparsed Code ===== | ===== Insert Unparsed Code ===== | ||
- | A trick to insert (nearly) every unparsed code in LESSPHP: | + | * A trick to insert (nearly) every unparsed code in LESSPHP: |
- | [[https:// | + | * And if you use an import of a css file [[https:// |
+ | FIXME Add code example here | ||
===== Caveats ===== | ===== Caveats ===== | ||
Because all CSS has to pass through the LESS parser, we're a bit more strict on valid CSS. If your plugin uses invalid CSS it will likely throw an error now. A list of currently known problems is available at [[devel: | Because all CSS has to pass through the LESS parser, we're a bit more strict on valid CSS. If your plugin uses invalid CSS it will likely throw an error now. A list of currently known problems is available at [[devel: | ||
devel/less.1640866680.txt.gz · Last modified: 2021-12-30 13:18 by schplurtz