devel:less
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
devel:less [2013-08-14 21:10] – [LESS CSS Support in DokuWiki] andi | 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 ====== | ||
- | [[develonly]] - this will be available in the next release | + | 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 [[http:// | + | 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 ===== | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | |||
+ | ===== How to realize an “IF-Statement”? | ||
+ | |||
+ | This LESS-code: | ||
+ | |||
+ | <code css> | ||
+ | @my-option: false; | ||
+ | |||
+ | .my-optional-style() when (@my-option = false) { | ||
+ | #main_body { background-color: | ||
+ | p { color: green; } | ||
+ | } | ||
+ | |||
+ | .my-optional-style() when (@my-option = true) { | ||
+ | #main_body { background-color: | ||
+ | p { color: black; } | ||
+ | } | ||
+ | |||
+ | .my-optional-style(); | ||
+ | </ | ||
+ | |||
+ | compiles to this CSS-code: | ||
+ | |||
+ | <code css> | ||
+ | #main_body { | ||
+ | background-color: | ||
+ | } | ||
+ | p { | ||
+ | color: green; | ||
+ | } | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== Insert Unparsed Code ===== | ||
+ | |||
+ | * A trick to insert (nearly) every unparsed code in LESSPHP: [[issue> | ||
+ | * 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.1376507408.txt.gz · Last modified: 2013-08-14 21:10 by andi