ALLES ÜBER adx_scss UND WIE ES AUF WEBSITES EINGESETZT WIRD

Untersuchte Extension

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

eigentumbeschreibungtypstandard
variablenArray von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @.reiheNULL
importPfadeKommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte.array|stringNULL
targetFilenameWenn gesetzt, speichert der Compiler die Datei unter diesem Namen.zeichenketteNULL
returnUriWenn 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|stringNULL
formatiererSetzt den Formatierer. Optionen: Verschachtelt, komprimiert, kompakt, gecrunched, Debuggen, erweitert, OutputBlockzeichenketteVerschachtelt
anzahlPräzisionStellen Sie die Nummer einPräzisionganzzahl5
lineNumberStyleSetzt den lineNumberStyle. Optionen: lineKommentare, debugInfozeichenketteNULL

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

eigentumbeschreibungtypstandard
datenSCSS-Daten oder Pfad und Dateiname zur SCSS-Datei.zeichenketteNULL
variablenArray von Variablen, die in den Compiler aufgenommen werden sollen. Setzen Sie den Variablennamen als Schlüssel und ohne @.reiheNULL
importPfadeKommagetrennte Zeichenkette und/oder Array von Verzeichnissen, wo man sich @import ansehen sollte.array|stringNULL
targetFilenameWenn gesetzt, speichert der Compiler die Datei unter diesem Namen.zeichenketteNULL
returnUriWenn 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|stringNULL
formatiererSetzt den Formatierer. Optionen: Verschachtelt, komprimiert, kompakt, gecrunched, Debuggen, erweitert, OutputBlockzeichenketteVerschachtelt
anzahlPräzisionStellen Sie die Nummer einPräzisionganzzahl5
lineNumberStyleSetzt den lineNumberStyle. Optionen: lineKommentare, debugInfozeichenketteNULL

zusätzlich für scss:compileAndInclude

eigentumbeschreibungtypstandard
includeCssSettingsWie TYPO3-Eigenschaft page.includeCss, jedoch ohne stdWrap.reiheNULL

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

responsive - image 4

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

speed test - image 5

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>

Ran an die Resultate – unser Newsletter für Sie!

Damit Sie gleich Wind davon bekommen, wenn wir in unserem Magazin zu neuen Erkenntnissen kommen.