drupal 7: theming with the sass framework
DESCRIPTION
An introduction to the SASS dynamic CSS framework and how the system can work to create easily editable and customizeable themes in Drupal!TRANSCRIPT
![Page 1: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/1.jpg)
SASSTime to bring some sassy to CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 2: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/2.jpg)
Who am I?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 3: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/3.jpg)
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
![Page 4: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/4.jpg)
SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 5: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/5.jpg)
Imagine CSS with the power of...
Nested Rules
Mixins / Objects
Variables
Inheritance
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 6: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/6.jpg)
Sassy CSS (.SCSS) is compiled into CSS.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 7: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/7.jpg)
What can you do with SASS?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 8: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/8.jpg)
Nesting
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 9: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/9.jpg)
Variables
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 10: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/10.jpg)
Inheritance
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 11: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/11.jpg)
Mixins
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 12: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/12.jpg)
Power of MixinsChunking 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
![Page 13: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/13.jpg)
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
![Page 14: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/14.jpg)
Parent Refs
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 15: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/15.jpg)
Functions
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 16: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/16.jpg)
Functions
Most recent feature of SASS.
Great for complex math.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 17: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/17.jpg)
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
![Page 18: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/18.jpg)
Visualizing Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css
![Page 19: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/19.jpg)
Visualizing Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css
@import “front”, “profile”;
![Page 20: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/20.jpg)
.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
![Page 21: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/21.jpg)
.SASS vs .SCSS
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
SASS can also convert between the two formats!
![Page 22: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/22.jpg)
So, how exactly does this help me?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 23: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/23.jpg)
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
![Page 24: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/24.jpg)
Compass?(believe me, you’ll want it)
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 25: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/25.jpg)
Sailing with Compass
Extends SASS framework.
Makes cross-browser CSS3 a breeze.
Makes implementing sprites easier.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 26: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/26.jpg)
Compass provides...
A series of mix-ins.
Lots of documentationhttp://compass-style.org/
reference/compass/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 27: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/27.jpg)
SASS + Compass
=
CSS nirvana
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 28: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/28.jpg)
Okay, so, show me how it works.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 30: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/30.jpg)
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
![Page 31: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/31.jpg)
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
![Page 32: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/32.jpg)
SASS can be compiled either...
At runtime
Or locally
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 33: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/33.jpg)
Sold. How do you make me SASSy?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 34: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/34.jpg)
Compass.app (Mac)http://compass-style.org/
http://compass.handlino.com/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 35: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/35.jpg)
Scout (Win, Mac)http://mhs.github.com/scout-app/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 36: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/36.jpg)
Terminal (Nerds)http://thesassway.com/beginner/getting-started-with-sass-and-
compass
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 37: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/37.jpg)
Drupal (Runtime)http://drupal.org/project/sass
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 38: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/38.jpg)
One more thing..Font-Awesome!Make your text sassy, too!
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 39: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/39.jpg)
http://fortawesome.github.com/Font-Awesome/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 40: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/40.jpg)
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
![Page 41: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/41.jpg)
Questions? Concerns?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
![Page 42: Drupal 7: Theming with the SASS Framework](https://reader034.vdocument.in/reader034/viewer/2022052410/5550b02ab4c905fa618b47bb/html5/thumbnails/42.jpg)
ResourcesSASS
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
http://sass-lang.com/tutorial.html
Compasshttp://compass-style.org/reference/compass/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat