Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Sass Best Practice

129 Aufrufe

Veröffentlicht am

Best use of Sass in Typo3-Projects

Veröffentlicht in: Software
  • Als Erste(r) kommentieren

Sass Best Practice

  1. 1. 2.4.2019 Sass Best Practices 1sudotec SASS Best Practices
  2. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×