.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt =========================== EXT: Name of your Extension =========================== :Author: Christopher :Created: 2010-12-18T19:57:23 :Changed: 2013-03-17T12:07:01.030000000 :Classification: extension key :Description: The keywords help with categorizing and tagging of the manuals. You can combine two or more keywords and add additional keywords yourself. Please use at least one keyword from both lists. If your manual is NOT in english, see next tab "language" ---- forEditors (use this for editors / german "Redakteure") forAdmins (use this for Administrators) forDevelopers (use this for Developers) forBeginners (manuals covering TYPO3 basics) forIntermediates (manuals going into more depth) forAdvanced (covering the most advanced TYPO3 topics) ---- :Keywords: keywords comma-separated :Author: Documentation Team :Email: documentation@typo3.org :Language: en .. _img-1-img-2-EXT-LESS-for-TYPO3: |img-1| |img-2| EXT: LESS for TYPO3 =================================== Extension Key: t3\_less Language: en Version: 0.5.2 Keywords: less, less-css, leafo.net/lessphp, lesscss.org, less.js, LESS for TYPO3 Copyright 2006-2013, David Greiner, 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 for TYPO3 1 <#__RefHeading__5708_1738894311>`_** **`Introduction 3 <#__RefHeading__5710_1738894311>`_** **`Users manual 4 <#__RefHeading__467_413120346>`_** **`Individual filesettings 5 <#__RefHeading__1751_1192968391>`_** **`TS-Reference 7 <#__RefHeading__1718_1192968391>`_** **`Constants-Editor 9 <#__RefHeading__31523_818911409>`_** **`Import-Directories 10 <#__RefHeading__929_1081173988>`_** **`Hooks 11 <#__RefHeading__1591_116213451>`_** **`Register custom functions 12 <#__RefHeading__862_1648447093>`_** **`Known problems 13 <#__RefHeading__31525_818911409>`_** **`Thanks to 14 <#__RefHeading__477_413120346>`_** .. _Introduction: Introduction ------------ What does it do? “LESS for TYPO3” makes it possible to use LESS-CSS on a very easy way in TYPO3. .. _Users-manual: Users manual ------------ Please follow the following steps in order to use this extension. Install the extension using the extension manager Include the static template file choose your favourite compiler using the constants editor define paths to less-folder and css-output folder using the constants editor store your less-files in the defined less-folder clear cache and reload your page If you are using php based compiler, you will find the compiled files in the defined output-folder .. _Individual-filesettings: Individual filesettings ----------------------- It is possible to define some settings for each file stored in the less-folder. The following TS is an example for using two less-files. Configuration is splitted for using php-based compiler and for using js-based compiler. plugin.tx\_t3less { ##Settings only for phpcompiler phpcompiler { filesettings { ## "style" = Filename of your lessfile without ".less"-extension (source file is style.less) style { media = only screen and (max-device-width: 480px) title = beispiel compress = 1 forceOnTop = 1 allWrap = '' excludeFromConcatenation = 0 sortOrder = 10 } style2 { sortOrder = 20 } style3 { excludeFromPageRenderer = 1 #this file will not be included via pagerenderer } ## "iehacks" = Filename of your lessfile without ".less"-extension (source file is iehacks.less) iehacks { allWrap = } } } jscompiler { filesettings { style { media = screen title = lessdatei allWrap = '' sortOrder = 10 } iehacks { media = all title = iehacks allWrap = sortOrder = 500 } } } } .. _TS-Reference: TS-Reference ------------ Options for using **PHP-compiler** plugin.tx\_t3less. **phpcompiler** .filesettings.LESS-FILENAME- WITHOUT-EXTENSION { .. ### BEGIN~OF~TABLE ### .. _media: media ^^^^^ .. container:: table-row Property media Data type String Description The media attribute. Like “screen”, “print” or media queries like “only screen and (max-device-width: 480px)” Default all .. _title: title ^^^^^ .. container:: table-row Property title Data type String Description The title attribute. A title for this stylesheet like “general” or “iehacks” or something else Default By default there will be no title .. _compress: compress ^^^^^^^^ .. container:: table-row Property compress Data type Integer Description Options are 1 (activated) or 0 (deactivated). This setting is for usage of page.config.compressCss Default 1 .. _forceOnTop: forceOnTop ^^^^^^^^^^ .. container:: table-row Property forceOnTop Data type Integer Description Options are 1 (activated) or 0 (deactivated). With this setting you can force to include this file at the top of your html-markup Default 0 .. _allWrap: allWrap ^^^^^^^ .. container:: table-row Property allWrap Data type String Description If you want to wrap the included file, please use “allWrap”. Example: Default By default there will be no wrap .. _excludeFromConcatenation: excludeFromConcatenation ^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property excludeFromConcatenation Data type Integer Description Options are 1 (activated) or 0 (deactivated). This setting is for usage of page.config.concatenateCss Default 0 .. _excludeFromPageRenderer: excludeFromPageRenderer ^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property excludeFromPageRenderer Data type Integer Description With this setting you can exclude this file from pagerenderer. If activated, the file will not be included to your page. Default 0 .. _sortOrder: sortOrder ^^^^^^^^^ .. container:: table-row Property sortOrder Data type Integer Description Lowest input will be included first, highest as latest Default By default there is no sortOrder given .. ###### END~OF~TABLE ###### Options for using **JS-compiler** plugin.tx\_t3less. **jscompiler** .filesettings.LESS-FILENAME-WITHOUT- EXTENSION { .. ### BEGIN~OF~TABLE ### .. _media: media ^^^^^ .. container:: table-row Property media Data type String Description The media attribute. Like “screen”, “print” or media queries like “only screen and (max-device-width: 480px)” Default all .. _title: title ^^^^^ .. container:: table-row Property title Data type String Description The title attribute. A title for this stylesheet like “general” or “iehacks” or something else Default By default there will be no title .. _allWrap: allWrap ^^^^^^^ .. container:: table-row Property allWrap Data type String Description If you want to wrap the included file, please use “allWrap”. Example: Default By default there will be no wrap .. _excludeFromPageRenderer: excludeFromPageRenderer ^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row Property excludeFromPageRenderer Data type Integer Description With this setting you can exclude this file from pagerenderer. If activated, the file will not be included to your page. Default 0 .. _sortOrder: sortOrder ^^^^^^^^^ .. container:: table-row Property sortOrder Data type Integer Description Lowest input will be included first, highest as latest Default By default there is no sortOrder given .. ###### END~OF~TABLE ###### All the other settings are senseless by using js-compiler, so they have the following static values. compress = FALSE forceOnTop = FALSE (changed from true to false since v0.5.1, cause sortOrder doesn't work together with it) excludeFromConcatenation = TRUE .. _Constants-Editor: Constants-Editor ---------------- There are some further settings in the constants-editor. .. ### BEGIN~OF~TABLE ### .. _Constant: Constant: ^^^^^^^^^ .. container:: table-row a Constant: b Data type: c Description: d Default: .. _plugin-tx-t3less-enable-mode: plugin.tx\_t3less.enable.mode ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.enable.mode b String (select) c Choose which compiler do you want to use. PHP-Compiler / JS-Compiler d PHP-Compiler .. _plugin-tx-t3less-files-pathToLessFiles: plugin.tx\_t3less.files.pathToLessFiles ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.files.pathToLessFiles b String c Path to an folder which contains your less-files d fileadmin/t3\_less/lessfiles .. _plugin-tx-t3less-files-outputFolder: plugin.tx\_t3less.files.outputFolder ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.files.outputFolder b String c Path to an folder which will contain your compiled files if you use php-compiler d fileadmin/t3\_less/cssfiles .. _plugin-tx-t3less-other-activateCompiler: plugin.tx\_t3less.other.activateCompiler ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.activateCompiler b Boolean c It is recommended to deactivate compiler if you don't have some new less-files to save serverpower d 1 .. _plugin-tx-t3less-other-unlinkCssFilesWithNoSourceFile: plugin.tx\_t3less.other.unlinkCssFilesWithNoSourceFile ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.unlinkCssFilesWithNoSourceFile b Boolean c If you deactivate this settings, files will not longer be deleted if their source file change (this is why compiled files are getting a md5-hash in their filenames) d 1 .. _plugin-tx-t3less-other-compressed: plugin.tx\_t3less.other.compressed ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.compressed b Boolean c CSS file will be compressed if you check this (recommended) d 1 .. _plugin-tx-t3less-other-forceMode: plugin.tx\_t3less.other.forceMode ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.forceMode b Boolean c ALWAYS generate new file (not recommended for production) d 0 .. _plugin-tx-t3less-other-importDirs: plugin.tx\_t3less.other.importDirs ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.importDirs b String c Comma seperated list of pathes to folders which should be used for imports. d .. _plugin-tx-t3less-other-lessJsScriptPath: plugin.tx\_t3less.other.lessJsScriptPath ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ .. container:: table-row a plugin.tx\_t3less.other.lessJsScriptPath b String c Path to JS compiler script d EXT:t3\_less/Resources/Public/Js/less-1.3.3.min.js .. ###### END~OF~TABLE ###### .. _Import-Directories: Import-Directories ------------------ It is possible to define one or more directories in which the phpcompiler will search for files which are included by using @import “lessfile.less”; in your less-files. For example: You have defined “plugin.tx\_t3less.other.importDirs = fileadmin/less/variables/, fileadmin/less/colors/” “plugin.tx\_t3less.files.pathToLessFiles = fileadmin/less/ “in the constants editor And in your less file “fileadmin/less/main.less” you have defined @import “variables.less”; Now, the phpcompiler is searching for “variables.less” in both defined folders. This has one big advantage: If you have a file variables.less which contains only variables and which is not directly in the “ pathToLessFiles” - folder, this file will not be compiled to a 0-byte file, but the variables will be available in all your compiled less files. Please read `http://leafo.net/lessphp/docs/#import\_directory `_ for more informations and a better explanation then mine ;) .. _Hooks: Hooks ----- There is a hook to pass less files from other extensions. It is very easy to use. Just add following line to ext\_localconf.php from your extension. $GLOBALS['TYPO3\_CONF\_VARS']['EXTCONF']['t3less']['addForeignLessFile s'][] = 'path/to/a/further/folder/with/less/files/'; All \*.less-files in the folder defined this way will be included too an can be configured by the known way. .. _Register-custom-functions: Register custom functions ------------------------- There is the possibility to register custom functions. Please take a look at `http://leafo.net/lessphp/docs/#custom\_functions `_ Using this in t3\_less is very easy. There is an example class in EXT:t3\_less/Classes/UserFunction/class.user\_exampleClass.php which is configured via TypoScript: plugin.tx\_t3less { ##Settings only for phpcompiler phpcompiler { registerFunctions { #Example user function double = EXT:t3\_less/Classes/UserFunction/class.user\_exampleClass.ph p:user\_exampleClass->exampleFunction } } } .. _Known-problems: Known problems -------------- There are no known problems at the moment. If you find a bug or something else, please let me know and contact me: hallo@davidgreiner.de or post it on forge: http://forge.typo3.org/projects/extension-t3\_less .. _Thanks-to: Thanks to --------- Thanks to leafo.net for developing this awesome less-php-compiler. http://leafo.net/lessphp/ Thanks to lesscss.org for developing this amazing css-framework. http://lesscss.org/ .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 44 .. :id: graphics5 .. :name: graphics5 .. :vspace: 57 .. :width: 161 .. |img-2| image:: img-2.png .. :align: left