Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VTS183: Sass, CSS on steroids

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.

A9934ebac3d430f4b6c7b215d07081ed?s=128

Mladen Đurić

April 19, 2018
Tweet

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