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
SASSTime 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://ericsembrat.com
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
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 - Eric Sembrat
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 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
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
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 SASS file to
@import filename;
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Visualizing Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css
Visualizing Partials
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
_front.scss
_profile.scss
style.scss
style.scss style.css
@import “front”, “profile”;
.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
.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 conventions.
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
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 Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
Compass provides...
A series of mix-ins.
Lots of documentationhttp://compass-style.org/
reference/compass/
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
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
#zone-menu-wrapper {
@include background-image(linear-gradient(bottom,$gtnavy, #24486b));
background-color: $gtnavy;
border-bottom: 2px solid $gtgold2;
}
Compass
SASS
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
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 Sembrat
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) - 2013 - Eric Sembrat
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 Group (GTDUG) - 2013 - Eric Sembrat
Questions? Concerns?
GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat
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