TYPO3 Plugin:

adx_scss

TYPO3-adx_scss

Übersicht

Diese TYPO3-Erweiterung enthält den SCSS-Compiler https://github.com/leafo/scssphp, der mit Bootstrap 4.x kompatibel ist.

  • Unterstützt einen Hook für \TYPO3\CMS\Core\Page\Page\PageRenderer, der SCSS-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
importPfade 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
formatierer Setzt den Formatierer. Optionen: Verschachtelt, komprimiert, kompakt, gecrunched, Debuggen, erweitert, OutputBlock zeichenkette Verschachtelt
anzahlPräzision Stellen Sie die Nummer einPräzision ganzzahl 5
lineNumberStyle Setzt den lineNumberStyle. Optionen: lineKommentare, debugInfo zeichenkette NULL

Konfiguration

plugin.tx_adxscss {

    # Wenn gesetzt, speichert der Compiler die Datei unter diesem Namen.
    targetFilename = 

    # Kommagetrennte Zeichenkette oder Array mit x = Verzeichnis.
    importPaths = 

    # Setzt den Formatierer. Optionen: Verschachtelt (Standard), Komprimiert, Kompakt, Crunched, Debuggen, Erweitert, OutputBlock
    formatierer = 

    # Setzt die numberPrecision (Standard: 5)
    numberPrecision = 5

    # Setzt die lineNumberStyle Optionen: 0 (Standard), ZeileKommentare, debugInfo
    lineNumberStyle = 0

    variablen {
        # Platzieren Sie hier Ihre eigenen Variablen.
    }
}

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\AdxScss\Utility\ScssUtility->includeCss einschließen
    10.compilerSettings =< plugin.tx_adxscss
    10.includeCssSettings {
        material = Druck
    }
    10.file = path/to/my/style-file.scss
    10.daten (
$nice-blau: blau;
körper {
  grenze: 1px solides $nice-blue;
}
)
}

ViewHelper

Liefert geparstes SCSS als CSS zurück.

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

ViewHelper Eigenschaften

für scss:compile

eigentum beschreibung typ standard
daten SCSS-Daten oder Pfad und Dateiname zur SCSS-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
importPfade 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
formatierer Setzt den Formatierer. Optionen: Verschachtelt, komprimiert, kompakt, gecrunched, Debuggen, erweitert, OutputBlock zeichenkette Verschachtelt
anzahlPräzision Stellen Sie die Nummer einPräzision ganzzahl 5
lineNumberStyle Setzt den lineNumberStyle. Optionen: lineKommentare, debugInfo zeichenkette NULL

zusätzlich für scss:compileAndInclude

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

Beispiele

XML/HTML:

<scss:comple data="div { color: $color; }" variables="{ color: 'red' }"" />

Output:

div { Farbe: rot; }

XML/HTML:

<scss:compileAndInclude variables="{ color: 'red' }" includeCssOptions="{ media: 'print' }">
    div {
        farbe: $color;
    }
</scss:compile>>

Output:

<link rel="stylesheet" type="text/css"  media="print">

Binden Sie die CSS-Datei über PageRenderer in die Seite ein.

Haken

PageRenderer

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

tinymce_rte

RTE.default.init.content_css = Pfad/zu/my/style-file.scss

oder anhängen von multiplizierten Dateien

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

tinymce4_rte

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

oder anhängen von multiplizierten Dateien mit kommagetrennten Zeichenketten

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

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

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

rtehtmlarea

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

Verwendung in Erweiterungen

// Objekt erstellen
$scss = GeneralUtility::makeInstance('AdGrafik\\\AdxScss\\\Scss');
/ / Holt die Konfiguration der Erweiterung. Erlaubte Parameter sind cObject oder PID.
$configuration = AdGrafik\AdxScss\Utility\ScssUtility::getConfiguration($GLOBALS['TSFE']->cObj);
// Kompilieren Sie die SCSS-Datei. Gibt den Dateipfad der geparsten SCSS-Datei zurück.
$pathAndFilename = 'path/to/my/style-file.scss';
$compiledPathAndFilename = $scss->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_SCSS ist auf

0 % aller TYPO3 installiert.

  • 0.02 % aller TYPO3 7.6.x Installationen installiert

PHP Version:ADX_SCSS wird benutzt mit

  • 100 % PHP/5.6

Gosign-Responsive Index: TYPO3 Installationen nutzen ADX_SCSS zu

  • 100 % wenn der Gosign-Responsive-Index zwischen 80 % und 100 % ist
  • 0 % 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_SCSS zu

  • 0 % wenn der Pagespeed zwischen 80 % und 100 % ist
  • 100 % wenn der Pagespeed zwischen 60 % und 80 % ist
  • 0 % wenn der Pagespeed zwischen 40 % und 60 % ist
  • 0 % wenn der Pagespeed zwischen 20 % und 40 % ist
  • 0 % wenn der Pagespeed zwischen 0 % und 20 % ist


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