Kick Ass with Sass

labbydev
hrodrig

"Everyone has been talking about Sass, but I have no idea what it is or how to get started."

"I’m comfortable with writing CSS and the command line is scary. Why should I learn YET ANOTHER new thing?"

These are common feelings for developers who are either considering or getting started with Sass. Sass is a powerful CSS extension language for front-end developers, and it’s used in an increasing number of Drupal starter themes, including Zen and Omega.

Developers love Sass because you can:

  • Define components once and reuse them throughout your project, rather than repeating the same CSS over and over (change your font-size or font-family in one line and it will update everywhere!)
  • Nest your CSS for more logical, maintainable stylesheets (use wisely!)
  • Perform advanced processing before your CSS is compiled, such as calculating color functions or creating image sprites

Although it’s powerful, Sass can be intimidating for beginners. In this session, we’ll go over what you need to know to get started kicking boring, bloated CSS ass with Sass.

We’ll also cover:

  • Basic Sass terminology -- mixins, variables, nesting, amp (&) and more

  • How to compile Sass into CSS that your browser can read

  • Tools and handy mixins that will make your front end development easier

  • Integrating Sass into your workflow and overcoming challenges

We’ll wrap it all up with a couple of code examples, showing how you can fully integrate Sass styles into your Drupal project.

 

Session Track

Front End

Experience Level

Intermediate

Drupal Version