This document introduces Sass, a preprocessor for CSS that allows for variables, nesting, mixins and more to make CSS more powerful, modular, and maintainable. It discusses how CSS has grown complex without features like variables, discusses the "Don't Repeat Yourself" principle in programming, and then outlines several key features of Sass like variables, nesting, mixins and plugins that help address these issues and clean up CSS. The document provides examples of how these Sass features work and concludes with information on getting started with Sass.
3. Eric Sembrat
• Web Manager for the College of
Engineering at Georgia Tech
• Ph.D. Student in Instructional
Technology at Georgia State
University
!
• Website: http://ericsembrat.com
• Twitter: @esembrat
• Hashtag: #Sassnooga
4. Our Roadmap
• State of CSS
• What is Sass?
• How to Use Sass
• Demo
• Questions / Comments
5. The State of CSS
Time to get serious about how we theme our themes
8. CSS Growing Up
• Before CSS, there were
inline element styles.
!
• Then CSS was born
with style.
!
• Finally, CSS grew too
big to live with HTML.
<font color=“green” size=“8” family=“Wingdings”>
<font style=“color: green; font-size: 8pt; font-family:
Wingdings”>
@import url(fancy-pants-css.css);
9. CSS Has Not Aged Well..
Variables
CSS3
Inheritance
Reusability
Clutter
Media Queries
Theme Templates
10. Some of this will change..
• CSS4 looks to fix some of
these issues (1)
• Parent Selectors
• Grids
• However, there’s still one big elephant in the room.
12. What is DRY?
• Minimizing repeating the
same declaration over
and over again
• Modifications only happen in
one place
!
• Modeled around the
construction of
repetitive, reusable,
and scalable elements
13. DRY in CSS
• CSS is too lazy to learn
to DRY
• Variables like color, font
• Media queries
• Chunks of CSS
• So, how do we fix this mess we are in?
15. What is Sass?
How Sass cleans out the CSS closet, once and for all!
16. Preprocessor
• Sass is a preprocessor for CSS
• Converts Sass short-code into clunky, ugly CSS
• Serves as a translator
CSS
compiles
to
SASS
17. Sass
• Sass uses a very CSS-like syntax (.SCSS) to extend
new features into the syntax you already know
!
• An alternative is a tab-centric syntax (.SASS)
19. .SCSS vs. .SASS
• Changing syntax is an automated process:
• http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax
20. Using Sass
How Sass cleans out the CSS closet, once and for all!
21. 0) Test Sass All Day
• SassMeister
• http://sassmeister.com/
22. 1) Get a App
• Easiest way to get started is to download a Sass
application.
• http://sass-lang.com/install
• Multi-platform releases
• Free and paid products available