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.
   

   View Slide

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

   View Slide

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.
   

   View Slide

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

   View Slide

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

   View Slide

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.
   

   View Slide

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)
   

   View Slide

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
   

   View Slide

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

   View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide