@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. 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 2 MLADEN ĐURIĆ a.k.a MacMladen $ whoami A very boring incompetent guy 

@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. 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 4 All about us ]{ODER 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ Sass IS SHORTHAND FOR? 5 

@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. 

@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) 

@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 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PREPROCESSING 9 

@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 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ COMPILING 11 

@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 

@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 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ VARIABLES 14 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ VARIABLES 15 Sass CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 16 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 17 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ NESTING 18 CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ PARTIALS 19 

@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. 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 21 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 22 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ IMPORT 23 CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MIXINS 24 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MIXINS 25 Sass CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 26 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 27 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 28 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 29 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ INHERITANCE 30 CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 31 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 32 Sass 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ OPERATORS 33 CSS 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS REFERENCES 34 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS BASICS 35 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ THE SASS WAY 36 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS BOILERPLATE 37 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS-GUIDELINES 38 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SASS STYLE GUIDE 39 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ SMASHING MAGAZINE 40 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ MLADEN ĐURIĆ a.k.a MacMladen Professional Development School 41 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ THANKS! 42 Mladen Đurić @MacMladen 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 43 Q & A Mladen Đurić [email protected] 

@MacMladen Sass — CSS on steroids v.1 2018-04-19 ]{ 44