Drupal 7: Theming with the SASS Framework

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

Who am I?

Eric Sembrat
Web Developer for
College of Sciences
Graduate Student at
Georgia State
University
Twitter - @esembrat
http://ericsembrat.com

SASS?

Imagine CSS with
the power of...
Nested Rules
Mixins / Objects
Variables
Inheritance

Sassy CSS (.SCSS)
is compiled into CSS.

What can you
do with SASS?

Nesting

Variables

Inheritance

Mixins

Power of Mixins
Chunking CSS into its
own function.
Great when you need
to reuse a lot of CSS.
“Mixing into” your
stylesheet.

But wait, there’s
more.
Mixins can have arguments.
And even preset default
values.
And can include other mixins.

Parent Refs

Functions

Functions
Most recent feature of SASS.
Great for complex math.

Partials (@import)
Separate your SASS into
partials (_filename.scss) to be
compiled into a .SCSS file.
Requires the host SASS file to
@import filename;

Visualizing
Partials
_front.scss
_proﬁle.scss
style.scss
style.scss style.css

Visualizing
Partials
_front.scss
_proﬁle.scss
style.scss
style.scss style.css
@import “front”,
“proﬁle”;

.SASS vs .SCSS
.SCSS should look familiar to
CSS users.
.SASS goes one step further
and works with white-
space/indention aware
syntax.

.SASS vs .SCSS
SASS can also convert between
the two formats!

So, how exactly does
this help me?

Writing with
SASS can...
Bring order to chaos that is CSS.
Allow you to easily reuse CSS
chunks.
Easily apply style conventions.

Compass?
(believe me, you’ll want it)

Sailing with
Compass
Extends SASS framework.
Makes cross-browser CSS3 a breeze.
Makes implementing sprites easier.

Compass provides...
A series of mix-ins.
Lots of documentation
http://compass-style.org/
reference/compass/

SASS + Compass
=
CSS nirvana

Okay, so, show me
how it works.

#zone-menu-wrapper {
@include background-image(linear-
gradient(bottom,$gtnavy, #24486b));
background-color: $gtnavy;
border-bottom: 2px solid $gtgold2;
}
Compass
SASS

#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

Sold. How do you
make me SASSy?

Compass.app (Mac)
http://compass-style.org/
http://compass.handlino.com/

Scout (Win, Mac)
http://mhs.github.com/scout-app/

Terminal (Nerds)
http://thesassway.com/beginner/getting-started-with-sass-and-
compass

Drupal (Runtime)
http://drupal.org/project/sass

One more thing..
Font-Awesome!
Make your text sassy, too!

http://fortawesome.github.com/Font-
Awesome/

Bring your theme into the 21st century
with sassy little icons!
Easily importable into your SASS
themes.

Questions? Concerns?

Resources
SASS
http://sass-lang.com/docs/yardoc/
ﬁle.SASS_REFERENCE.html
http://sass-lang.com/tutorial.html
Compass
http://compass-style.org/reference/compass/

Drupal 7: Theming with the SASS Framework

Recommended

Recommended

More Related Content

Similar to Drupal 7: Theming with the SASS Framework

Similar to Drupal 7: Theming with the SASS Framework (20)

More from Eric Sembrat

More from Eric Sembrat (20)

Recently uploaded

Recently uploaded (20)

Drupal 7: Theming with the SASS Framework