DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
EXT: LESS Compiler¶
| Created: | 2010-02-18T17:33:18 |
|---|---|
| Changed by: | Thomas Prangenberg |
| Changed: | 2014-05-31T21:08:32.560000000 |
| Classification: | onm_less |
| Description: | A LESS Compiler for Typo3 Stylesheets, based on lessphp from leafo.ne |
| Keywords: | less, lessphp, leafo.ne, dynamic css, css processor |
| Author: | Thomas Prangenberg |
| Email: | tpb@onm.de |
| Info 4: | |
| Language: | en |
EXT: LESS Compiler - onm_less
EXT: LESS Compiler¶
Extension Key: onm_less
Language: en
Keywords: less, lessphp, leafo.ne, dynamic css, css processor
Copyright 2000-2010, Thomas Prangenberg, <tpb@onm.de>
This document is published under the Open Content License
available from http://www.opencontent.org/opl.shtml
The content of this document is related to TYPO3
- a GNU/GPL CMS/Framework available from www.typo3.org
Table of Contents¶
`Introduction 3 <#__RefHeading__1201_929760326>`_
`Configuration 4 <#__RefHeading__1207_929760326>`_
`Known problems 6 <#__RefHeading__1211_929760326>`_
`To-Do list 7 <#__RefHeading__1213_929760326>`_
Introduction¶
What does it do?¶
This extensions adds the possibility to add LESS ( http://www.lesscss.org ) files via PAGE.includeCSS in TypoScript. The files are compiled with lessphp written by Leaf Corcoran ( http://leafo.net/lessphp ). It is influenced by existing solutions like t3_less, but with a slightly different approach.
Features¶
- Files will be cached and only be re-compiled if modified (while keeping track of modifications in “@import”ed files)
- Output of lessphp can be configured in TypoScript
- You can pass functions and variables into LESS via TypoScript
- You can choose between the current and a legacy version of lessphp (e.g. for projects built with bootstrap 2)
- Experimental: compile files using recess instead of lessphp
Configuration¶
- Install the extension from the TER
- add the static template in your template record - if you don't, nothing will happen at all
- Add your LESS Stylesheets on the PAGE object in your template. The extension will detect LESS files by their file extension (.less) and compile them automatically. The compiled CSS files will be rewritten every time any of the included LESS files (the referenced file as well as files included via @import) were modified (or the compiled CSS files have been deleted).
- Change the output paths and lessphp configuration, if necessary.
- Clear the cache
- You can pass functions and variables to LESS in your TypoScript setup
Reference¶
Constants ( plugin.tx_onmless.[property] )¶
path.output¶
Property
path.output
Data type
string
Description
Output path. The compiled css files will be written and referenced here.
Please note: File references in your CSS will not be modified by the compiler. You should change this to a directory next to the location of your .less files to preserve the references to your resources (url(“.../images/image.gif”)). For example, if your path to the LESS files looks like the following:
fileadmin/template/less
You may want to set this value to something like this:
fileadmin/template/css
Default
typo3temp/onm_less/cssout
path.cache¶
Property
path.cache
Data type
string
Description
Cache path. The lessphp cache data will be stored here. Modification shouldn't be necessary.
Default
typo3temp/onm_less/lesscache
lessphp.formatter¶
Property
lessphp.formatter
Data type
string
Description
Can be set to “lessjs” (default), “compressed” or “classic”
Default
lessjs
lessphp.force¶
Property
lessphp.force
Data type
boolean
Description
If this is set, the file will always be recompiled, even if not modified
Default
0
lessphp.version¶
Property
lessphp.version
Data type
string
Description
Sets the version of lessphp (either "current" or "legacy"). If you're using boostrap 2 you will need to change this to “legacy”
Default
current
lessphp.preserveComments¶
Property
lessphp.preserveComments
Data type
boolean
Description
Preserve comments in compiled file
Default
0
addHash¶
Property
addHash
Data type
boolean
Description
By default, the path to less file will be added as a md5-hash to the output filename to prevent name conflicts. You may disable this here.
Please note that if you use the .variables property in your setup, setting this to FALSE will have no effect, because the variables and their values will always be appended as a hash.
Default
1
enable¶
Property
enable
Data type
boolean
Description
Enable/disable compiling. If this is set to FALSE, the extension won't do anything.
Default
1
Setup ( plugin.tx_onmless.[property] )¶
(all of the properties in constants, in addition to the following)
registerFunction¶
Property
registerFunction
Data type
array
Description
Set of name-callback pairs to be registered in LESS
Default
variables¶
Property
variables
Data type
array
Description
Variables to pass into LESS.
This will only work if the variable is NOT redeclared in your LESS file. Values set in LESS itself will always have higher priority.
Default
Examples¶
Just include your LESS files the way you would add a usual stylesheet
page = PAGE
page.includeCSS {
#this will be compiled:
file1 = fileadmin/templates/default/less/styles.less
#this will not be touched:
file2 = fileadmin/templates/default/css/justcss.css
}
this will result in following output:
<link rel="stylesheet" type="text/css" href="typo3temp/onm_less/cssout/styles-e969c8f8e0ee20df1fb5e27d844495e4.css" media="all">
<link rel="stylesheet" type="text/css" href="fileadmin/templates/default/css/justcss.css" media="all">
Setting variables¶
Set variables in LESS using TypoScript. The following configuration will set the value of the @awesomeColor variable to “#F00” in your LESS file.
plugin.tx_onmless {
variables {
awesomeColor = #F00
}
}
Register Functions¶
This example is taken from the lessphp documentation and adds a
function called double that doubles any numeric argument:
plugin.tx_onmless {
registerFunction {
double = user_AWESOMEUSERFUNC->lessphp_double
}
}
class user_AWESOMEUSERFUNC {
public function lessphp_double($arg) {
list($type, $value) = $arg;
return array($type, $value*2);
}
}
div { width: double(400px); }
Known problems¶
None so far, please let me know if you're having any trouble using this extension.