EXT: Name of your Extension¶

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¶

What does it do?

“LESS for TYPO3” makes it possible to use LESS-CSS on a very easy way in TYPO3.

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¶

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 = <!--[if IE]> | <![endif]-->

}

}

}

jscompiler {

filesettings {

style {

media = screen

title = lessdatei

allWrap = ''

sortOrder = 10

}

iehacks {

media = all

title = iehacks

allWrap = <!--[if IE]> | <![endif]-->

sortOrder = 500

}

}

}

}

TS-Reference¶

Options for using PHP-compiler

plugin.tx_t3less. phpcompiler .filesettings.LESS-FILENAME- WITHOUT-EXTENSION {

Constants-Editor¶

There are some further settings in the constants-editor.

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¶

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¶

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¶

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 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/