SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann...
Transcript of SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann...
![Page 1: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/1.jpg)
SCSS und CompassGrundlagen
Von Marc Reimann (Mediendepot Ruhr)Contao NRW-Day 2014
![Page 2: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/2.jpg)
SCSS und Compass
Marc ReimannMediendepot Ruhr
Forum: MacKP (Contao-Yoda)https://twitter.com/MacKPWDhttps://www.facebook.com/MacKPWDhttps://plus.google.com/+MarcReimann
![Page 3: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/3.jpg)
Inhalt
● Sass
– Warum Sass?
– Variablen
– Nesting
– Partials
– Mixins
– Extend
– Operators
– Control Directives
– @media
● Compass
– Lokale Schriften
– Sprites
● Nützliche Links
![Page 4: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/4.jpg)
SCSS und Compass
http://sass-lang.comSass CSS with superpowersSyntactically Awesome StylesheetsPre-processing | SCSS-Syntax (Sassy CSS)
http://compass-style.org/Compass is an open-source CSS Authoring Framework.
![Page 5: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/5.jpg)
Warum Sass?● Net Awards (2014):
Sass “game changer of the year”
● Für viele bekannte CSS-Frameworks gibt es eine Sass-Portierung (Yaml | bootstrap)
● Weil CSS endlich wieder Spaß macht!
![Page 6: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/6.jpg)
Variablen | SCSS
![Page 7: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/7.jpg)
Variablen | CSS
![Page 8: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/8.jpg)
Variablen | HTML
![Page 9: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/9.jpg)
Nesting | SCSS
![Page 10: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/10.jpg)
Nesting | CSS
![Page 11: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/11.jpg)
Nesting | HTML
![Page 12: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/12.jpg)
Partials | Import
● Auslagern von Snippets in Dateien
● _partial.scssDurch den Unterstrich weiß Sass, dass keine CSS-Datei erstellt werden soll
● Benutzt man mit @import
![Page 13: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/13.jpg)
Partials | Import
● Am Beispiel Contao 3.3default.scss | _basic.scss
![Page 14: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/14.jpg)
Partials | Import
● Am Beispiel Contao 3.3_vars.scss
![Page 15: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/15.jpg)
Mixins
● Funktionen auslagern, um diese immer wieder zu nutzen
![Page 16: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/16.jpg)
Mixins
● Funktionen auslagern, um diese immer wieder zu nutzen
![Page 17: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/17.jpg)
Mixins
● Funktionen auslagern, um diese immer wieder zu nutzen
![Page 18: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/18.jpg)
Mixins
● Beispiel 2:damit der Schatten überall gleich ist
● Compass wird benutzt, um Prefixe passend zu haben @import→
![Page 19: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/19.jpg)
Mixins
![Page 20: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/20.jpg)
Mixins
![Page 21: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/21.jpg)
Extend/Inheritance
● Mit @extended Eigenschaften eines anderen Selectors übernehmen
![Page 22: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/22.jpg)
Extend/Inheritance
![Page 23: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/23.jpg)
Extend/Inheritance
![Page 24: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/24.jpg)
Operators
Berechnen mit:● +● -● *● /● %
![Page 25: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/25.jpg)
Operators
![Page 26: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/26.jpg)
Operators
![Page 27: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/27.jpg)
Control Directives & Expressions
● @if
● @for
● @each
![Page 28: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/28.jpg)
Control Directives & Expressions
![Page 29: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/29.jpg)
Control Directives & Expressions
![Page 30: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/30.jpg)
Control Directives & Expressions
![Page 31: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/31.jpg)
@media inline nutzen
![Page 32: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/32.jpg)
Compass
● Erweitert Sass um nützliche Snippets
● Beispiele:– Lokale Schriften einfügen
– Sprite erstellen
![Page 33: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/33.jpg)
Lokale Schriften
![Page 34: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/34.jpg)
Lokale Schriften
![Page 35: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/35.jpg)
Sprites generieren (lassen)
![Page 36: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/36.jpg)
Sprites generieren (lassen)
![Page 37: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/37.jpg)
Sprites generieren (lassen)
![Page 38: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/38.jpg)
Nützliche Links
Unter Artikel: Sass/Scss und Compass als CSS preprocessor
http://www.mediendepot-ruhr.de/sassscss-und-compass-als-css-preprocessor.html
![Page 39: SCSS und Compass Grundlagen - contao.ninja€¦ · SCSS und Compass Grundlagen Von Marc Reimann (Mediendepot Ruhr) Contao NRW-Day 2014](https://reader036.fdocuments.net/reader036/viewer/2022062506/5f161d5259c102245929d752/html5/thumbnails/39.jpg)
Vielen Dank für eure Aufmerksamkeit!