VTS183: Sass, CSS on steroids

This is the third lecture in cooperation with High Technical School in Novi Sad (Visoka tehnička škola strukovnih studija) held on April 19, 2018.

Meetup event: https://www.meetup.com/koderrs/events/249824255/

Learn how to write CSS like a coder, structured, using variables and mixins, modularly, clean and maintainable.

Sass is for CSS what PHP is for HTML (generally speaking). By using syntax that is very similar to CSS and yet extended that enables us to make a better structure, use extensive comments to document the code and remove them with a simple switch for production. By using it together with some popular methodology like SMACSS or BEM we can get much more maintainable code we can be proud of.

Transcript

1. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ Sass CSS ON STEROIDS 1 Mladen Đurić @MacMladen Viša tehnička škola strukovnih studija Novi Sad Predavaona, 2018.04.19.
2. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 2 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy
3. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 3 As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organized first computer club and gave first BASIC course. It was around 1982. In 2016 I have started a Professional Web Development School ]{oder.
4. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 4 All about us ]{ODER
5. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ Sass IS SHORTHAND FOR? 5
6. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 6 Sass Syntactically Awesome Style Sheets Sass is a scripting language that is interpreted into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called the indented syntax, uses a syntax similar to Haml. It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, SCSS, uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.
7. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INTRODUCE YOURSELF! 7 • Your… style weapon of choice? (CSS, Sass, LESS…) • Your field? (frontend, developer) • Coding experience? (none, some, pro)
8. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ TIMETABLE: 1. Preprocessing 2. Compiling 3. Variables 4. Nesting 5. Partials 6. Import 7. Mixins 8. Inheritance 9. Operators 8
9. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PREPROCESSING 9
10. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PREPROCESSING CSS: • getting larger • more complex • harder to maintain Sass: • variables • nesting • mixins CSS === fun again :) 10
11. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ COMPILING 11
12. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ COMPILING Current compilers: • Ruby Sass 3.5.6 • LibSass 3.5.2 
 (node-sass, gulp-sass) • Dart Sass 1.2.0 12
13. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SETTING UP Prerequisite: • Install NodeJS https://nodejs.org/ Requisite: npm install node-sass Redirect output to desired file: ./node_modules/.bin/node-sass style.scss > style.css 13
14. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ VARIABLES 14
15. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ VARIABLES 15 Sass CSS
16. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 16
17. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 17 Sass
18. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 18 CSS
19. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PARTIALS 19
20. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PARTIALS You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive. 20 _partial.scss.
21. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 21
22. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 22 Sass
23. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 23 CSS
24. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MIXINS 24
25. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MIXINS 25 Sass CSS
26. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 26
27. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 27 Sass
28. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 28 Sass
29. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 29 Sass
30. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 30 CSS
31. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 31
32. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 32 Sass
33. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 33 CSS
34. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS REFERENCES 34
35. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS BASICS 35
36. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ THE SASS WAY 36
37. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS BOILERPLATE 37
38. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS-GUIDELINES 38
39. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS STYLE GUIDE 39
40. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SMASHING MAGAZINE 40
41. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MLADEN ĐURIĆ a.k.a MacMladen Professional Development School 41
42. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ THANKS! 42 Mladen Đurić @MacMladen
43. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 43 Q & A Mladen Đurić mladen@koder.rs
44. @MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 44