TYPO3 Plugin:

adx_less

TYPO3-adx_less

Übersicht

Diese TYPO3-Erweiterung enthält den LESS-Compiler http://lessphp.gpeasy.com/, der mit Bootstrap 3.3.x kompatibel ist.

  • Unterstützt einen Haken für \TYPO3\CMS\Core\Page\Page\PageRenderer, der LESS-Dateien für includeCSS kompiliert
  • eine Funktion für USER-Objekt
  • haken für rtehtmlarea, tinymce_rte und tinymce4_rte
  • und ein ViewHelper für Fluid.

Um kompilierte Dateien zu löschen oder zu regenerieren, gehen Sie zu den "Flush general Caches".

TypoScript

TypoScript-Eigenschaften

eigentum beschreibung typ standard
variablen Array von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @. reihe NULL
importDirectories Kommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte. Siehe http://lessphp.gpeasy.com/ array|string NULL
targetFilename Wenn gesetzt, speichert der Compiler die Datei unter diesem Namen. zeichenkette NULL
returnUri Wenn das Schlüsselwort absolut gesetzt ist, gibt der Compiler den absoluten Pfad zur Datei zurück. Wenn auf siteURL gesetzt, gibt es die komplette URL mit TYPO3_SITE_URL zurück. Wenn TRUE, ist der zurückgegebene Wert der relative Pfad, andernfalls, wenn FALSE, wird der geparste Inhalt zurückgegeben. boolean|string NULL
komprimieren Auf TRUE setzen, wenn kompiliertes CSS komprimiert werden soll. boolesch WAHR
relativeUrls Ob die URL's so angepasst werden sollen, dass sie relativ sind. boolesch WAHR
strictUnits Ob Einheiten richtig bewertet werden müssen. boolesch FALSCH
strictMath Ob Mathematik in Klammern stehen muss. boolesch FALSCH

Konfiguration

plugin.tx_adxless {

    variablen {
        schön blau = #5B83AD
        hellblau = @nice-blau + #111
    }

    # Kommagetrennte Zeichenkette oder Array mit Pfad => Verzeichnis.
    # @see http://lessphp.gpeasy.com/
    importDirectories = 
}

Wichtig! Die Eigenschaft lessphp wurde seit v1.1.1.1 entfernt. Setzen Sie plugin.tx_adxless < plugin.tx_adxless.lessphp im TypoScript für Abwärtskompatibilität.

USER-Objekt

seite.headerData.1367742474 = COA
seite.headerData.1367742474 {

    # Setzen Sie das USER-Inhaltsobjekt an die gewünschte Stelle. Die Funktion includeCss erzeugt die CSS-Datei und hängt sie mit dem PageRenderer an.
    10 = BENUTZER
    10.userFunc = AdGrafik\AdxLess\Utility\LessUtility->includeCss enthalten
    10.compilerSettings =< plugin.tx_adxless
    10.includeCssSettings {
        material = Druck
    }
    10.datei = EXT:adx_less/Ressourcen/Private/LESS/Example/Styles.less
    10.daten (
körper {
  grenze: 1px solid @nice-blue;
}
)
}

ViewHelper

Gibt geparstes LESS als CSS zurück.

{namespace less=AdGrafik\AdxLess\ViewHelpers}
<less:comple data="[string]" variables="[array]""[array]" />
<less:compileAndInclude data="[string]" variables="[array]"[array]"" />

ViewHelper Eigenschaften

für weniger:compile

eigentum beschreibung typ standard
daten WENIGERe Daten oder Pfad und Dateiname zur LESS-Datei. zeichenkette NULL
variablen Array von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @. reihe NULL
importDirectories Kommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte. array|string NULL
targetFilename Wenn gesetzt, speichert der Compiler die Datei unter diesem Namen. zeichenkette NULL
returnUri Wenn das Schlüsselwort absolut gesetzt ist, gibt der Compiler den absoluten Pfad zur Datei zurück. Wenn auf siteURL gesetzt, gibt es die komplette URL mit TYPO3_SITE_URL zurück. Wenn TRUE, ist der zurückgegebene Wert der relative Pfad, andernfalls, wenn FALSE, wird der geparste Inhalt zurückgegeben. boolean|string NULL
komprimieren Auf TRUE setzen, wenn kompiliertes CSS komprimiert werden soll. boolesch WAHR
relativeUrls Ob die URL's so angepasst werden sollen, dass sie relativ sind. boolesch WAHR
strictUnits Ob Einheiten richtig bewertet werden müssen. boolesch FALSCH
strictMath Ob Mathematik in Klammern stehen muss. boolesch FALSCH

zusätzlich für weniger:compileAndInclude

eigentum beschreibung typ standard
includeCssSettings Wie TYPO3-Eigenschaft page.includeCss, jedoch ohne stdWrap. reihe NULL

Haken

PageRenderer

page.includeCSS.styles = Pfad/zu/my/style-file.less

tinymce_rte

RTE.default.init.content_css = path/to/my/style-file.less

oder anhängen von multiplizierten Dateien

RTE.default.init.content_css = Pfad/zu/my/style-file-1.less,Pfad/zu/my/style-file-2.less,Pfad/zu/my/style-file-3.less

tinymce4_rte

RTE.default.contentCSS = Pfad/zu/my/style-file.less

oder anhängen von multiplizierten Dateien mit kommagetrennten Zeichenketten

RTE.default.contentCSS = Pfad/zu/my/style-file-1.less,Pfad/zu/my/style-file-2.less,Pfad/zu/my/style-file-3.less

oder anhängen von multiplizierten Dateien mit dem Schlüssel

RTE.default.contentCSS {
    file1 = Pfad/zu/mir/style-file-1.less
    file2 = Pfad/zu/mir/style-file-2.less
    file3 = Pfad/zu/mir/style-file-3.less
}

rtehtmlarea

RTE.default.contentCSS = Pfad/zu/my/style-file.less

Verwendung in Erweiterungen

// Objekt erstellen
$less = GeneralUtility::makeInstance('AdGrafik\\AdxLess\\Less');
/ / Holt die Konfiguration der Erweiterung. Erlaubte Parameter sind cObject oder PID.
$configuration = AdGrafik\AdxLess\Utility\LessUtility::getConfiguration($GLOBALS['TSFE']->cObj);
// Kompilieren Sie die LESS-Datei. Gibt den Dateipfad der geparsten LESS-Datei zurück.
$pathAndFilename = 'path/to/my/style-file.less';
$compiledPathAndFilename = $less->compile($pathAndFilename, $configuration);

Benötigen Sie schnelle Hilfe mit dieser Extension? Unser Team von erfahrenen TYPO3-Entwicklern löst Probleme unkompliziert und zum Stundensatz.

Verteilung:ADX_LESS ist auf

0.07 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 8.7.x Installationen installiert
  • 0.41 % aller TYPO3 7.6.x Installationen installiert

Gosign-Responsive Index: TYPO3 Installationen nutzen ADX_LESS zu

  • 64 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 36 % wenn der Gosign-Responsive-Index zwischen 60 % und 80 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 40 % und 60 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 20 % und 40 % ist
  • 0 % wenn der Gosign-Responsive-Index zwischen 0 % und 20 % ist

Pagespeed: TYPO3 Installationen nutzen ADX_LESS zu

  • 56 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 28 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 16 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 4 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 8 % wenn der Pagespeed zwischen 0 % und 20 % ist


Stichprobe n=37860 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de/.ch/.at>