.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================== 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 |img-1| |img-2| EXT: LESS Compiler - onm\_less .. _EXT-LESS-Compiler: EXT: LESS Compiler ================== Extension Key: onm\_less Language: en Keywords: less, lessphp, leafo.ne, dynamic css, css processor Copyright 2000-2010, Thomas Prangenberg, 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: Table of Contents ----------------- `EXT: LESS Compiler 1 <#__RefHeading__1199_929760326>`_ **`Introduction 3 <#__RefHeading__1201_929760326>`_** `What does it do? 3 <#__RefHeading__1203_929760326>`_ **`Configuration 4 <#__RefHeading__1207_929760326>`_** `Reference 4 <#__RefHeading__1209_929760326>`_ **`Known problems 6 <#__RefHeading__1211_929760326>`_** **`To-Do list 7 <#__RefHeading__1213_929760326>`_** .. _Introduction: Introduction ------------ .. _What-does-it-do: 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: 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: 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: Reference ^^^^^^^^^ .. _Constants-plugin-tx-onmless-property: Constants ( **plugin.tx\_onmless.[property]** ) """"""""""""""""""""""""""""""""""""""""""""""" .. ### BEGIN~OF~TABLE ### .. _path-output: path.output ~~~~~~~~~~~ .. container:: table-row 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: path.cache ~~~~~~~~~~ .. container:: table-row 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: lessphp.formatter ~~~~~~~~~~~~~~~~~ .. container:: table-row Property lessphp.formatter Data type string Description Can be set to “lessjs” (default), “compressed” or “classic” Default lessjs .. _lessphp-force: lessphp.force ~~~~~~~~~~~~~ .. container:: table-row 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: lessphp.version ~~~~~~~~~~~~~~~ .. container:: table-row 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: lessphp.preserveComments ~~~~~~~~~~~~~~~~~~~~~~~~ .. container:: table-row Property lessphp.preserveComments Data type boolean Description Preserve comments in compiled file Default 0 .. _addHash: addHash ~~~~~~~ .. container:: table-row 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: enable ~~~~~~ .. container:: table-row Property enable Data type boolean Description Enable/disable compiling. If this is set to FALSE, the extension won't do anything. Default 1 .. ###### END~OF~TABLE ###### .. _Setup-plugin-tx-onmless-property: Setup ( **plugin.tx\_onmless.[property]** ) """"""""""""""""""""""""""""""""""""""""""" (all of the properties in constants, in addition to the following) .. ### BEGIN~OF~TABLE ### .. _registerFunction: registerFunction ~~~~~~~~~~~~~~~~ .. container:: table-row Property registerFunction Data type array Description Set of name-callback pairs to be registered in LESS Default .. _variables: variables ~~~~~~~~~ .. container:: table-row 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 .. ###### END~OF~TABLE ###### .. _Examples: 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: :: .. _Setting-variables: 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: Register Functions ~~~~~~~~~~~~~~~~~~ This example is taken from the lessphp documentation and adds a function called :code:`double` that doubles any numeric argument: .. _TypoScript: TypoScript '''''''''' :: plugin.tx_onmless { registerFunction { double = user_AWESOMEUSERFUNC->lessphp_double } } .. _PHP: PHP ''' :: class user_AWESOMEUSERFUNC { public function lessphp_double($arg) { list($type, $value) = $arg; return array($type, $value*2); } } .. _LESS: LESS '''' :: div { width: double(400px); } .. _Known-problems: Known problems -------------- None so far, please let me know if you're having any trouble using this extension. .. _To-Do-list: To-Do list ---------- Add functionality for combining and compressing JavaScript files as well |img-2| 8 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. |img-2| image:: img-2.png .. :border: 0 .. :height: 21 .. :hspace: 9 .. :id: Grafik2 .. :name: Grafik2 .. :width: 87