0
SASS
Time to bring some sassy to CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Who am I?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Eric Sembrat
Web Developer for
College of Sciences
Graduate Student at
Georgia State
University
Twitter - @esembrat
http:/...
SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Imagine CSS with
the power of...
Nested Rules
Mixins / Objects
Variables
Inheritance
GT Drupal Users Group (GTDUG) - 2013 ...
Sassy CSS (.SCSS)
is compiled into CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
What can you
do with SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Nesting
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Variables
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Inheritance
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Mixins
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Power of Mixins
Chunking CSS into its
own function.
Great when you need
to reuse a lot of CSS.
“Mixing into” your
styleshe...
But wait, there’s
more.
Mixins can have arguments.
And even preset default
values.
And can include other mixins.
GT Drupal...
Parent Refs
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Functions
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Functions
Most recent feature of SASS.
Great for complex math.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Partials (@import)
Separate your SASS into
partials (_filename.scss) to be
compiled into a .SCSS file.
Requires the host SAS...
Visualizing
Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss st...
Visualizing
Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss st...
.SASS vs .SCSS
.SCSS should look familiar to
CSS users.
.SASS goes one step further
and works with white-
space/indention ...
.SASS vs .SCSS
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
SASS can also convert between
the two formats!
So, how exactly does
this help me?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Writing with
SASS can...
Bring order to chaos that is CSS.
Allow you to easily reuse CSS
chunks.
Easily apply style conven...
Compass?
(believe me, you’ll want it)
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Sailing with
Compass
Extends SASS framework.
Makes cross-browser CSS3 a breeze.
Makes implementing sprites easier.
GT Drup...
Compass provides...
A series of mix-ins.
Lots of documentation
http://compass-style.org/
reference/compass/
GT Drupal User...
SASS + Compass
=
CSS nirvana
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Okay, so, show me
how it works.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
#zone-menu-wrapper {
@include background-image(linear-
gradient(bottom...
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
#zone-menu-wrapper {
background-image: -webkit-gradient(linear, 50%
10...
SASS can be compiled
either...
At runtime
Or locally
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Sold. How do you
make me SASSy?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Compass.app (Mac)
http://compass-style.org/
http://compass.handlino.com/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembr...
Scout (Win, Mac)
http://mhs.github.com/scout-app/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Terminal (Nerds)
http://thesassway.com/beginner/getting-started-with-sass-and-
compass
GT Drupal Users Group (GTDUG) - 201...
Drupal (Runtime)
http://drupal.org/project/sass
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
One more thing..
Font-Awesome!
Make your text sassy, too!
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
http://fortawesome.github.com/Font-
Awesome/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Bring your theme into the 21st century
with sassy little icons!
Easily importable into your SASS
themes.
GT Drupal Users G...
Questions? Concerns?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Resources
SASS
http://sass-lang.com/docs/yardoc/
file.SASS_REFERENCE.html
http://sass-lang.com/tutorial.html
Compass
http:/...
Upcoming SlideShare
Loading in...5
×

Drupal 7: Theming with the SASS Framework

1,134

Published on

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

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,134
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
20
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Drupal 7: Theming with the SASS Framework"

  1. 1. SASS Time to bring some sassy to CSS. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  2. 2. Who am I? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  3. 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. 4. SASS? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  5. 5. Imagine CSS with the power of... Nested Rules Mixins / Objects Variables Inheritance GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  6. 6. Sassy CSS (.SCSS) is compiled into CSS. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  7. 7. What can you do with SASS? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  8. 8. Nesting GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  9. 9. Variables GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  10. 10. Inheritance GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  11. 11. Mixins GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  12. 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. 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. 14. Parent Refs GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  15. 15. Functions GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  16. 16. Functions Most recent feature of SASS. Great for complex math. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  17. 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. 18. Visualizing Partials GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat _front.scss _profile.scss style.scss style.scss style.css
  19. 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. 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. 21. .SASS vs .SCSS GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat SASS can also convert between the two formats!
  22. 22. So, how exactly does this help me? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  23. 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. 24. Compass? (believe me, you’ll want it) GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  25. 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. 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. 27. SASS + Compass = CSS nirvana GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  28. 28. Okay, so, show me how it works. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  29. 29. GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  30. 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. 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. 32. SASS can be compiled either... At runtime Or locally GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  33. 33. Sold. How do you make me SASSy? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  34. 34. Compass.app (Mac) http://compass-style.org/ http://compass.handlino.com/ GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  35. 35. Scout (Win, Mac) http://mhs.github.com/scout-app/ GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  36. 36. Terminal (Nerds) http://thesassway.com/beginner/getting-started-with-sass-and- compass GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  37. 37. Drupal (Runtime) http://drupal.org/project/sass GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  38. 38. One more thing.. Font-Awesome! Make your text sassy, too! GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  39. 39. http://fortawesome.github.com/Font- Awesome/ GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  40. 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. 41. Questions? Concerns? GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
  42. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×