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

1. Getting SASSy
with front end development

2. The Studio of
Matthew Carleton
Web Design, development and branding
@matthewcarleton
matthewcarleton.com

3. What’s the deal
with SASS?

4. Who’s heard of SASS?

5. Who’s used SASS?

6. [SYNTACTICALLY AWESOME STYLESHEETS]

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. What is SASS?

9. SASS is a preprocessor for your CSS
</> </>
input.scss output.css

10. Who is SASS for?

11. I am not a programmer

12. I don’t want to be a
programmer

14. Organized CSS

15. The Problem with CSS
Repetitive
Difficult to maintain
Unorganized

16. Core Features of SASS
Variables
Nesting
Mixins
@import

17. Variables
Say goodbye to HEX Values

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

19. Variables
Say goodbye to HEX values
Once defined variables can then be used through-out your SASS.
SCSS CSS

20. Variables
Making life simpler
Strings of text
Colours
Hex values
Numbers
Boolean values
Value lists
SCSS CSS

21. Nesting
Stop repeating yourself

22. Nesting
Stop repeating yourself
Nesting allows you to nest child elements under parent elements.
SCSSCSS

23. Nesting
The all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class
extensions.
SCSSCSS

24. Nesting
The all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class
extensions.
SCSSCSS

25. Nesting
The all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class
extensions.
HTML

26. Nesting
The all powerful “&”
Using the “&” helps with pseudo elements, pseudo classes, and class
extensions.
SCSSCSS

27. Nesting
Commenting and spacing
Commenting and spacing keeps your SASS legible.
SCSS SCSS

28. Mixins
Reusable chunks of CSS

29. Mixins
Reusable chunks of CSS
Create a mixin by declaring “@mixin mixin-name”. Call a mixin by
declaring “@include mixin-name”.
SCSS

30. Mixins
Arguments
Using arguments in your mixins makes them so much better!
SCSS

31. Mixins
Arguments
Arguments accept default values as fallbacks if no value is given.
SCSS

32. @import
For the Obsessive Compulsive

33. @import
</> </>
input.scss
</>
variables.scss
</>
mixins.scss
</>
type.scss
output.css

34. @import
For the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS

35. @import
For the Obsessive Compulsive
Keeping your styles organized just got so much easier with @import.
SCSS

36. @import

37. Setting up SASS
The dreaded terminal

38. Setting up SASS
The dreaded terminal

39. Setting up SASS
Step 1 : Install SASS
$ gem install sass

40. Setting up SASS
Step 2 : Watch
$ sass —watch sass/styles.scss:css/styles.css

41. Setting up SASS
Bonus : Output style

42. Setting up SASS
Bonus : Output style
Nested
Expanded
Compact
Compressed
$ sass — watch sass/styles.scss:css/styles.css — style compressed

43. Setting up SASS
Windows Users :(

44. Setting up SASS
Windows Users :(
http://rubyinstaller.org

45. Libraries
Don’t reinvent the wheel.
SASS libraries make it much easier to implement things that otherwise
would require a lot more CSS.

46. Libraries
Don’t reinvent the wheel.
SCSS

47. CSS
Libraries
Don’t reinvent the wheel.

48. Resources
http://sass-lang.com
http://sassmeister.com
http://livereload.com

49. THANK YOU
@matthewcarleton matthewcarleton.com