Drupal 7: Theming with the SASS Framework
Upcoming SlideShare
Loading in...5
×
 

Drupal 7: Theming with the SASS Framework

on

  • 1,154 views

An introduction to the SASS dynamic CSS framework and how the system can work to create easily editable and customizeable themes in Drupal!

An introduction to the SASS dynamic CSS framework and how the system can work to create easily editable and customizeable themes in Drupal!

Statistics

Views

Total Views
1,154
Views on SlideShare
1,153
Embed Views
1

Actions

Likes
2
Downloads
16
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Drupal 7: Theming with the SASS Framework Drupal 7: Theming with the SASS Framework Presentation Transcript

  • SASS Time 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 Mixins Chunking 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 documentation http://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
  • Resources SASS http://sass-lang.com/docs/yardoc/ file.SASS_REFERENCE.html http://sass-lang.com/tutorial.html Compass http://compass-style.org/reference/compass/ GT Drupal Users Group (GTDUG) - 2013 - Eric Sembrat