drupal 7: theming with the sass framework

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

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