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