Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Getting SASSy with front end development

946 views

Published on

A introduction to writing CSS with SASS (SCSS). Great for designers who want to improve their front end development skills.

Published in: Design

Getting SASSy with front end development

  1. 1. Getting SASSy with front end development
  2. 2. The Studio of 
 Matthew Carleton Web Design, development and branding @matthewcarleton matthewcarleton.com
  3. 3. What’s the deal 
 with SASS?
  4. 4. Who’s heard of SASS?
  5. 5. Who’s used SASS?
  6. 6. [SYNTACTICALLY AWESOME STYLESHEETS]
  7. 7. What we will talk about 1. SASS? 2. Who is SASS for 3. Features of SASS 4. Setting up SASS 5. Libraries & Resources
  8. 8. What is SASS?
  9. 9. SASS is a preprocessor for your CSS </> </> input.scss output.css
  10. 10. Who is SASS for?

  11. 11. I am not a programmer
  12. 12. I don’t want to be a programmer
  13. 13. Organized CSS
  14. 14. The Problem with CSS Repetitive Difficult to maintain Unorganized
  15. 15. Core Features of SASS Variables Nesting
 Mixins @import
  16. 16. Variables Say goodbye to HEX Values
  17. 17. Variables Say goodbye to HEX values A variable allows you to pull in values that you only define once. If you are looking for one reason to switch to SASS variables are it. SCSS
  18. 18. Variables Say goodbye to HEX values Once defined variables can then be used through-out your SASS. SCSS CSS
  19. 19. Variables Making life simpler Strings of text Colours Hex values Numbers Boolean values Value lists SCSS CSS
  20. 20. Nesting Stop repeating yourself
  21. 21. Nesting Stop repeating yourself Nesting allows you to nest child elements under parent elements. SCSSCSS
  22. 22. Nesting The all powerful “&” Using the “&” helps with pseudo elements, pseudo classes, and class extensions. SCSSCSS
  23. 23. Nesting The all powerful “&” Using the “&” helps with pseudo elements, pseudo classes, and class extensions. SCSSCSS
  24. 24. Nesting The all powerful “&” Using the “&” helps with pseudo elements, pseudo classes, and class extensions. HTML
  25. 25. Nesting The all powerful “&” Using the “&” helps with pseudo elements, pseudo classes, and class extensions. SCSSCSS
  26. 26. Nesting Commenting and spacing Commenting and spacing keeps your SASS legible. SCSS SCSS
  27. 27. Mixins Reusable chunks of CSS
  28. 28. Mixins Reusable chunks of CSS Create a mixin by declaring “@mixin mixin-name”. Call a mixin by declaring “@include mixin-name”. SCSS
  29. 29. Mixins Arguments Using arguments in your mixins makes them so much better! SCSS
  30. 30. Mixins Arguments Arguments accept default values as fallbacks if no value is given. SCSS
  31. 31. @import For the Obsessive Compulsive
  32. 32. @import </> </> input.scss </> variables.scss </> mixins.scss </> type.scss output.css
  33. 33. @import For the Obsessive Compulsive Keeping your styles organized just got so much easier with @import. SCSS
  34. 34. @import For the Obsessive Compulsive Keeping your styles organized just got so much easier with @import. SCSS
  35. 35. @import
  36. 36. Setting up SASS The dreaded terminal
  37. 37. Setting up SASS The dreaded terminal
  38. 38. Setting up SASS Step 1 : Install SASS $ gem install sass
  39. 39. Setting up SASS Step 2 : Watch $ sass —watch sass/styles.scss:css/styles.css
  40. 40. Setting up SASS Bonus : Output style
  41. 41. Setting up SASS Bonus : Output style Nested Expanded Compact Compressed $ sass — watch sass/styles.scss:css/styles.css — style compressed
  42. 42. Setting up SASS Windows Users :(
  43. 43. Setting up SASS Windows Users :( http://rubyinstaller.org
  44. 44. Libraries Don’t reinvent the wheel.
 SASS libraries make it much easier to implement things that otherwise would require a lot more CSS.
  45. 45. Libraries Don’t reinvent the wheel. SCSS
  46. 46. CSS Libraries Don’t reinvent the wheel.
  47. 47. Resources http://sass-lang.com http://sassmeister.com http://livereload.com
  48. 48. THANK YOU @matthewcarleton matthewcarleton.com

×