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
[DependciesAndConflicts]
Stichprobe n=37158 von Gosign gecrawlte TYPO3-Seiten mit den Top-Level-Domains <.de/.ch/.at>