Drupal 7: Theming with the SASS Framework

SASSTime to bring some sassy to CSS.

GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat

http://ericsembrat.com


Who am I?




Eric Sembrat

Web Developer for College of Sciences

Graduate Student at Georgia State

University

Twitter - @esembrat







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


http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23nested_rules




















Variables


http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23variables_



































Inheritance


http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23extend





















Mixins


http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23mixins

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23mixins



Power of MixinsChunking 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

_profile.scss

style.scss

style.scss style.css



Visualizing Partials


_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.


http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html

http://sass-lang.com/docs/yardoc/file.INDENTED_SYNTAX.html



.SASS vs .SCSS


SASS can also convert between the two formats!



http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23syntax

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html%23syntax

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 documentationhttp://compass-style.org/

reference/compass/


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/


http://compass-style.org

http://compass-style.org

http://compass.handlino.com

http://compass.handlino.com



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


http://mhs.github.com/scout-app/

http://mhs.github.com/scout-app/



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

compass


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?




ResourcesSASS

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html

http://sass-lang.com/tutorial.html

Compasshttp://compass-style.org/reference/compass/












Drupal 7: Theming with the SASS Framework

Technology

Transcript of Drupal 7: Theming with the SASS Framework