An introduction to the SASS dynamic CSS framework and how the system can work to create easily editable and customizeable themes in Drupal!

1. SASS
Time to bring some sassy to CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

2. Who am I?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

3. Eric Sembrat
Web Developer for
College of Sciences
Graduate Student at
Georgia State
University
Twitter - @esembrat
http://ericsembrat.com
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

4. SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

5. Imagine CSS with
the power of...
Nested Rules
Mixins / Objects
Variables
Inheritance
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

6. Sassy CSS (.SCSS)
is compiled into CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

7. What can you
do with SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

8. Nesting
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

9. Variables
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

10. Inheritance
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

11. Mixins
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

12. Power of Mixins
Chunking CSS into its
own function.
Great when you need
to reuse a lot of CSS.
“Mixing into” your
stylesheet.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

13. But wait, there’s
more.
Mixins can have arguments.
And even preset default
values.
And can include other mixins.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

14. Parent Refs
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

15. Functions
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

16. Functions
Most recent feature of SASS.
Great for complex math.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

17. Partials (@import)
Separate your SASS into
partials (_filename.scss) to be
compiled into a .SCSS file.
Requires the host SASS file to
@import filename;
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

18. Visualizing
Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css

19. Visualizing
Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css
@import “front”,
“profile”;

20. .SASS vs .SCSS
.SCSS should look familiar to
CSS users.
.SASS goes one step further
and works with white-
space/indention aware
syntax.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

21. .SASS vs .SCSS
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
SASS can also convert between
the two formats!

22. So, how exactly does
this help me?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

23. Writing with
SASS can...
Bring order to chaos that is CSS.
Allow you to easily reuse CSS
chunks.
Easily apply style conventions.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

24. Compass?
(believe me, you’ll want it)
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

25. Sailing with
Compass
Extends SASS framework.
Makes cross-browser CSS3 a breeze.
Makes implementing sprites easier.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

26. Compass provides...
A series of mix-ins.
Lots of documentation
http://compass-style.org/
reference/compass/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

27. SASS + Compass
=
CSS nirvana
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

28. Okay, so, show me
how it works.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

29. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

30. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
#zone-menu-wrapper {
@include background-image(linear-
gradient(bottom,$gtnavy, #24486b));
background-color: $gtnavy;
border-bottom: 2px solid $gtgold2;
}
Compass
SASS

31. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
#zone-menu-wrapper {
background-image: -webkit-gradient(linear, 50%
100%, 50% 0%, color-stop(0%, #00254c), color-
stop(100%, #24486b));
background-image: -webkit-linear-
gradient(bottom, #00254c, #24486b);
background-image: -moz-linear-
gradient(bottom, #00254c, #24486b);
background-image: -o-linear-gradient(bottom,
#00254c, #24486b);
background-image: linear-gradient(bottom,
#00254c, #24486b);
background-color: #00254c;
border-bottom: 2px solid #eeb221;
}
(ugly, ugly)
CSS

32. SASS can be compiled
either...
At runtime
Or locally
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

33. Sold. How do you
make me SASSy?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

34. Compass.app (Mac)
http://compass-style.org/
http://compass.handlino.com/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

35. Scout (Win, Mac)
http://mhs.github.com/scout-app/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

36. Terminal (Nerds)
http://thesassway.com/beginner/getting-started-with-sass-and-
compass
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

37. Drupal (Runtime)
http://drupal.org/project/sass
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

38. One more thing..
Font-Awesome!
Make your text sassy, too!
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

39. http://fortawesome.github.com/Font-
Awesome/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

40. Bring your theme into the 21st century
with sassy little icons!
Easily importable into your SASS
themes.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

41. Questions? Concerns?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

42. Resources
SASS
http://sass-lang.com/docs/yardoc/
file.SASS_REFERENCE.html
http://sass-lang.com/tutorial.html
Compass
http://compass-style.org/reference/compass/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat