Best use of Sass in Typo3-Projects

1. 2.4.2019 Sass Best Practices 1sudotec
SASS Best Practices

2. 2.4.2019 Sass Best Practices 2sudotec
Nicolai Schirawski
● sudotec.de
● (Co-)Gründer und (Co-)Geschäftsführer
● TYPO3-Consultant, TYPO3-Developer, TYPO3-Integrator (nicht zertifiziert)
● Mail: ns@sudotec.de

3. 2.4.2019 Sass Best Practices 3sudotec
Ablauf
● Was ist das Problem mit CSS?
● Was ist Sass?
● Sass Geschichte
● Styleguide
● Partials
● Ordnerstruktur
● Framworks
● Mixins/Placehoders
● Beispiele
●
Umsetzung

4. 2.4.2019 Sass Best Practices 4sudotec
Probleme mit CSS
CSS neigt zur Unübersichtlichkeit
Gründe:
1
2
3
4
Spoiler => hier kann Sass helfen!
Syntax: Unterschiedliche
Autoren = unterschiedliche
Formatierungen/Ansätze
Struktur: Html-Selektoren-
Ketten
Filegröße: CSS wächst
mit der Zeit, bildet oft
Arbeits-Chronologie ab
Inhalt: enthält häufig
Wiederholungen

5. 2.4.2019 Sass Best Practices 5sudotec
Was ist Sass?
● Sass ist ein Präprozessor
● Er beseitigt die Fehler von CSS
●
kein Allheilmittel
● muss richtig angewendet werden
● wer es einmal nutzt, will es nie wieder
missen
● Alternativen: less, stylus

6. 2.4.2019 Sass Best Practices 6sudotec
Sass Geschichte
● 2006 als Ruby-Projekt gestartet
● inzwischen auf C++ portiert (LibSass)
● Einbindung jetzt deutlich einfacher
●
Ursprungs-Syntax: sass (basierend auf
Einrückungen)
●
Neue Syntax: scss (kompatibel zu css)
●
Jedes css-File ist zugleich gültiges
scss-File!
// Variable
!primary-color= hotpink
// Mixin
=border-radius(!radius)
-webkit-border-radius= !radius
-moz-border-radius= !radius
border-radius= !radius
.my-element
color= !primary-color
width= 100%
overflow= hidden
.my-other-element
+border-radius(5px)
// Variable
$primary-color: hotpink;
// Mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-element {
color: $primary-color;
width: 100%;
overflow: hidden;
}
.my-other-element {
@include border-radius(5px);
}
sass-syntax scss-syntax

7. 2.4.2019 Sass Best Practices 7sudotec
Wie Sass hilft
● Variablen
● Partials
● Mixins
● Placeholders
● Styleguide
● Ordnerstruktur
● HTML-Struktur
● CSS-Linter
Das bringt SASS mit
Das müssen wir
selbst erledigen

8. 2.4.2019 Sass Best Practices 8sudotec
Styleguide
Styleguide umso wichtiger
●
je mehr Teammitglieder
● je komplexer das Projekt
● je länger das Projekt läuft
●
je mehr Projekte pro Teammitglied
Haupt-Regeln
●
Einrückung 2 Leerstellen
● Zeilen max. 80 Zeichen
● Je Zeile nur eine Regel, je Zeile nur einen
Selektor
● Sinnvolle Leerzeilen
● Kommentare
.foo, .bar {
display: block; overflow: hidden;
padding: 0px 1em;
color:#ffffff;
}
.foo {display: block; overflow: hidden}
// some valuable comment
.foo {
display: block;
overflow: hidden;
padding: 0 1em;
}
.bar,
.foobar < .baz {
color: #fff;
}
je komplex desto styleguide
1
gut
ungut

9. 2.4.2019 Sass Best Practices 9sudotec
Styleguide (extended)
IDs – nicht für Styling nutzen
● unübersichtlich
● widerspricht der
Wiederverwendbarkeit
● gegen IDs als
Sprungmarken oder als
Selektoren für js ist nichts
einzuwenden
1
<section id="footer">
<p class="error">Fehlertext.</p>
</section>
#footer p{
color: black;
}
p.error{
color: red;
}
#footer p.error{
color: red;
}
p.error{
color: red !important;
}
html
css

10. 2.4.2019 Sass Best Practices 10sudotec
Exkurs: Specificity-Wars
● spezifischere Regel gewinnt
● bei gleicher Spezifität gewinnt die spätere Regel
● (fast) kein Übergang von einer Stelle in die
nächste => abhängig von Implementation
a 0,0,0,0,1
p a 0,0,0,0,2
.foo 0,0,0,1,0
a.foo 0,0,0,1,1
p a.foo 0,0,0,1,2
.foo .bar 0,0,0,2,0
div[id=foo] 0,0,0,1,1
#foo 0,0,1,0,0
inline-style 0,1,0,0,0
!important 1,0,0,0,0
So werten Browser die Regeln aus

11. 2.4.2019 Sass Best Practices 11sudotec
Styleguide (extended)
● !important – (fast) nicht nutzen
Ausnahmen:
.hidden {
display: none !important;
}
// my comment, what is intended here
// and why an „important“-statement is needed
.page_42 {
.news a {
color: $secondary !important;
}
}
1
Shame-Dateigenerische Klassen

12. 2.4.2019 Sass Best Practices 12sudotec
Styleguide (extended)
● Selektorentiefe:
maximal 3 Ebenen
●
Das ist eine Regel mit starken Implikationen für html, Wahl der
Klassenbezeichnungen und Strukur des css
● Verschachtelungstiefe kann reduziert werden durch Wahl von Klassennamen
// no
body .main .news .news-list a > ul > ul {
padding-left: 5px;
}
// yes
.main-content .news-list a {
color: green;
}
2

13. 2.4.2019 Sass Best Practices 13sudotec
Exkurs: Namenskonvention (BEM)
●
BEM = „Block, Element, Modifier“
●
class=“block__element--modifier
●
reduziert Verschachtelungstiefe!
<figure class="photo">
<img class="photo__img" src="me.jpg">
<figcaption class="photo__caption">
<blockquote class="photo__quote">
Look at me!
</blockquote>
</figcaption>
</figure>
.photo__quote {
color: black;
}
<div class="photo">
<img src="me.jpg">
<figcaption>
<blockquote>
Look at me!
</blockquote>
</figcaption>
</div>
.photo {
figcapition {
blockquote {
color: black;
}
}
}

14. 2.4.2019 Sass Best Practices 14sudotec
Sass-Partials 3
●
file.scss wird übersetzt zu
file.css
●
_file.scss wird nicht übersetzt
●
Partials einbinden mit
„@import „file“;
●
kein Performance-Verlust, weil
sass die Files zu einem css-File
zusammenfügt!
●
alle Partials im Haupt-File
sammeln: main.scss
// Einstellungen (Nur Definitionen. Keine Sass-Anweisungen)
@import '1-Settings/glyphicons';
@import '1-Settings/mixins';
@import '1-Settings/breakpoints';
@import "1-Settings/bootstrap_variables";
// Bibliotheken (Externe Libraries)
@import "2-Libraries/bootstrap-4.0.0/scss/bootstrap";
// generelle Komponenten ( seitenweite Geltung)
@import "3-Base/debug";
@import "3-Base/Global";
// Einstellungen für Seitenbereiche (für Unterbereiche der Seite)
@import "4-Zones/Footer";
@import "4-Zones/Content";
// Menüs
@import "5-Menus/Mainnav";
@import "5-Menus/Metanav";
// Seitenelemente (alle Typo3-Elemente und unsere Elemente)
@import "6-Components/Kartenteaser";
@import "6-Components/Slider";
@import "6-Components/Stoerer";
// Extensions
@import "7-Extensions/news";
// Hacks für einzelne Seiten
@import "8-Specific/startseite";
@import "8-Specific/shame";
Typischer Inhalt von main.scss

15. 2.4.2019 Sass Best Practices 15sudotec
Ordnerstruktur 3
●
Ordnung:
Allgemein -> Speziell
● Nur „1-Settings“
=> kein Output
● Bis „2-Libraries“
=> angepasstes Bootstrap
●
Bis „3-Base“
=> Seite mit Grundeinstellungen
● Abschnitt 4: Unterbereiche der Seite
●
Abschnitte 5-7 können je nach
Bedarf auch zusammengefasst oder
anders strukturiert werden
●
Abschnitt 8: Styles für Einzelseiten,
spezielle Hacks
● Ordner liegen in:
sitepackage/Resources/Private/Sass
● 1-Settings
● 2-Libraries
● 3-Base
● 4-Zones
● 5-Menus
● 6-Components
● 7-Extensions
● 8-Specific
main.scss

16. 2.4.2019 Sass Best Practices 16sudotec
Sass Variable 4
Beispiel: Farben
h1 {
background-color: #b0eb00;
}
a {
color: #b0eb00;
}
button {
border-color: #b0eb00;
}
css
$yellow-green: #b0eb00;
h1 {
background-color: $yellow-green;
}
a {
color: $yellow-green;
}
button {
border-color: $yellow-green;
}
sass 1
● Unübersichtlich
● Kein innerer
Zusammenhang
● schwer zu lesen
besser, aber:
● Farbnamen nehmen schnell
überhand
● was, wenn sich die Farbe
prinzipiell ändert?
$yellow-green: #b0eb00;
$primary: $yellow-green;
h1 {
background-color: $primary;
}
a {
color: $primary;
}
button {
border-color: $primary;
}
sass 2
gut:
● im ersten Schritt Farben lesbar
machen
● im zweiten Schritt auf Funktions-
Farbnamen zuweisen
● Farbzuweisungen in
1-settings/colors
● Varianten über sass-Farbfunktionen

17. 2.4.2019 Sass Best Practices 17sudotec
Frameworks
● Bootstrap, Foundation o.ä.
●
Pro: Standard-Layout, Grid-System,
Normalisierung, einfacher Start
● Con: ungenutzte Anweisungen, hohe
Verschachtelungstiefe (Widerspruch zu
Styleguide, schwierig zu überschreiben)
● Nutzung mit Sass: Sass-Version einbinden
●
Framework mit übersetzen lassen. Dabei
Variablen überschreiben.
● Nicht genutzte Framework-Teile
auskommentieren
Beispiel: Zentrales File von Bootstrap
@import "functions";
@import "variables";
@import "mixins";
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";
@import "print";

18. 2.4.2019 Sass Best Practices 18sudotec
Mixins
● Bislang: hierarchische Struktur
●
mixins arbeiten davon unabhängig und
verbinden sass-Komponenten
@mixin clearfix {
&::after {
content: '';
display: table;
clear: both;
}
}
// usage
.foo {
@include clearfix;
...
}
@mixin size($width, $height: $width) {
width: $width;
height: $height;
}
// usage
.btn--rect {
@include size(100px, 10px);
}
.btn--square {
@include size(30px);
}
Mixin mit Pseudoelement Mixin mit flexiblen Argumenten

19. 2.4.2019 Sass Best Practices 19sudotec
Beispiel: Refactoring
.adr:before, .tel:before {color:#f93131;vertical-align: top;font-size: 13px;
white-space: nowrap;padding:1px;display: inline-block;font-family:'Glyphicons Halflings';
font-style: normal;font-weight: normal;-webkit-font-smoothing: antialiased;}
.adr:before {content: "e021";}
.tel:before {content: "e183";}
Schritt 1: Glyphicon-Bezeichner sprechend
// file: 1-settings/glyphicons
$glyphicon-home: 'e021';
$glyphicon-phone-alt: 'e183';
Schritt 2: Mixin
@mixin iconbefore($content) {
&::before {
color: $primary;
vertical-align: top;
font-size: 13px;
white-space: nowrap;
padding: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
content: $content;
}
}
Schritt 3: sass-Code
.adr {
@include iconbefore($glyphicon-home);
}
.tel {
@include iconbefore($glyphicon-phone-alt);
}
Schritt 4: Autoprefixer nutzen (Folie 22)

20. 2.4.2019 Sass Best Practices 20sudotec
Placeholders
%bg-image {
width: 100%;
background-position: center center;
...
}
.image-one {
@extend %bg-image;
background-image:url(/img/image-one.jpg");
}
.image-two {
@extend %bg-image;
background-image:url(/img/image-two.jpg");
}
.image-one, .image-two {
width: 100%;
background-position: center center;
...
}
.image-one {
background-image:url(/img/image-one.jpg") ;
}
.image-two {
background-image:url(/img/image-two.jpg") ;
}
Placeholder
kompiliertes css
@mixin bg-image {
width: 100%;
background-position: center center;
...
}
.image-one {
@include bg-image;
background-image:url(/img/image-one.jpg");
}
.image-two {
@include bg-image;
background-image:url(/img/image-two.jpg");
}
.image-one, {
width: 100%;
background-position: center center;
...
background-image:url(/img/image-one.jpg") ;
}
.image-two, {
width: 100%;
background-position: center center;
...
background-image:url(/img/image-two.jpg") ;
}
Mixin ohne Funktionsargument
kompiliertes css

21. 2.4.2019 Sass Best Practices 21sudotec
Beispiel: Media Queries
●
Media-Queries in mixins auslagern
●
wird meist von den Frameworks schon
angeboten
● nötigenfalls erweitern oder von
anderen Frameworks kopieren
●
sass gestattet die Verwendung
irgendwo im Code
@media (max-width: 991px) {
.header-image, #meta-nav, #main-nav {position:relative}
#main-nav {top:0}
...
}
.logo {
...
top: 125px;
@include media-breakpoint-down(sm) {
top: 25px;
}
}
css: Oft Block am Ende
sass

22. 2.4.2019 Sass Best Practices 22sudotec
Umsetzung
1) phpstorm mit filewatcher
● Pro: geht einfach
● Con: nicht versionierbar
●
Con: kein Linter2) grunt (oder anderer Taskrunner)
●
Pro: Versionierbar
● incl Autoprefixer
● incl stylelinter
● Con: kann kompliziert werden
module.exports = function(grunt) {
grunt.initConfig({
// Lint all SCSS files before compilation
stylelint: {
files: [
'extensions/sitepackage/Resources/Private/Sass/**/*.scss',
'!extensions/sitepackage/Resources/Private/Sass/2-Libraries/**/*.scss'
]
},
// Convert SCSS files to regular single CSS file
sass: {
layout: {
options: {
sourceMap: true,
outputStyle: 'expanded'
},
src: ['extensions/sitepackage/Resources/Private/Sass/main.scss'],
dest: 'extensions/sitepackage/Resources/Public/Css/main.css'
}
},
// Add vendor prefixes to CSS file, according to browserlist file
postcss: {
layout: {
src: 'extensions/sitepackage/Resources/Public/Css/main.css',
options: {
map: true,
processors: [
require('autoprefixer')()
]
}
}
},
// Watch these files and directories
watch: {
grunt: {
files: ['Gruntfile.js', 'package.json']
},
sass_layout: {
files: ['extensions/sitepackage/Resources/Private/Sass/**/*.scss'],
tasks: ['stylelint', 'sass:layout', 'postcss:layout']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-stylelint');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['watch']);
};

23. 2.4.2019 Sass Best Practices 23sudotec
Zusammenfassung
● Styleguide erstellen und konsequent nutzen,
am besten mit Stylelinter
● Alle sass-Files in klare Ordnerstruktur
auslagern (Partials)
● Möglichst einfachen Code schreiben
● viel kommentieren
● Spaß haben!

24. 2.4.2019 Sass Best Practices 24sudotec
Links
●
Exzellenter Überblick
https://sass-guidelin.es/
●
kürzer, größtenteils überschneidend
https://www.sitepoint.com/8-tips-help-get-best-sass/
●
anderer Schwerpunkt, teils überschneidend
https://css-tricks.com/sass-style-guide/
●
BEM-Kurzüberblick
https://seesparkbox.com/foundry/bem_by_example