Sass - Getting Started with Sass!
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Sass - Getting Started with Sass!

  • 1,174 views
Uploaded on

A presentation for DrupalCamp Chattanooga 2013 on getting started with the Sass CSS framework!

A presentation for DrupalCamp Chattanooga 2013 on getting started with the Sass CSS framework!

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,174
On Slideshare
1,174
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
45
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Theming with Sass Bringing sassy to CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 2. About Me Eric Scott Sembrat • Web Developer at Georgia Institute of Technology • Graduate Student at Georgia State University • Lives in Atlanta, Georgia ! Twitter: @esembrat Website: ericsembrat.com Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 3. Game Plan • Knowing Your Audience • The State of CSS • Introduction to Sass • Features of Sass • Advanced Features • Using Sass • A short and lovely demo Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 4. You can test out Sass during this presentation! http://sassmeister.com/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 5. Knowing Your Audience Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 6. Who has heard of Sass? The preprocessor, not the attitude. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 7. Who has used Sass? It’s super effective! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 8. State of CSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 9. Frustrations with CSS • CSS has not aged well. • Vendor-specific prefixes in CSS3. • Replacing a color value in a project. • Copying and pasting a style (over and over again). • These are not features; they’re nightmares! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 10. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 11. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 12. Fixing CSS • What if you could give CSS a makeover? • Make it intelligent. • Make it scalable. • Make it re-usable. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 13. Intro to Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 14. History • Syntactically Awesome Stylesheets • First developed in 2007. ! • Serves as: • Scripting language. • Preprocessor for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 15. Function • Sass compiles into CSS files. ! • Two formatting conventions • .SASS • .SCSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 16. .SCSS • SCSS follows conventions of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 17. .SASS • SASS focuses on indentation and shorthand. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 18. Hard to Choose? • Sass can convert between SASS and SCSS with relative ease. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 19. Sassy Components • A Sass project (such as a Drupal theme) only needs two key components: • config.rb • sass/{sass files here} Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 20. config.rb Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 21. config.rb Almost always auto-generated! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 22. /sass/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 23. Sassy Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 24. Features • Sass has 5 primary features. • Variables • Nesting • Mixins • Partials • Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 25. Variables Let’s time-travel back to Computer Science 1101. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 26. Variables • Variables allow you to assign a value to an easy-to-remember placeholder name. • Works with hex values, strings of text, colors, numbers, boolean values, or even value lists. • No more memorizing hex values! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 27. Variables • Pro-tip: Variables have scope based on where they are defined. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 28. Nesting Not the empty-nest variety. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 29. Nesting • Nested rules allow you to break up endlessly long selectors of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 30. Nesting Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 31. Mixins It’s time to cook (up some mixins)! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 32. Mixins • Mixins allow you to chunk up CSS declarations to be reusable with one reference. • Pro-tip: Mixins can reference mixins as well. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 33. Mixins Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 34. Partials Spring cleaning for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 35. Partials • CSS Fact of Life: • CSS files can get long (and unwieldy). • Sass allows you to create partial files to modularize and organize your code. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 36. Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 37. Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 38. Visualizing Partials Sass CSS _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 39. Visualizing Partials Sass _header.scss CSS inh erit s compiles inherits _sidebar.scss in rits he global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 40. Creating Partials • Creating partials can be done in two steps. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 41. Step 1: Create Partial • Create a _filename.scss in your SASS folder. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 42. Step 2: Reference Partial • Reference the partial Sass file in your nonpartial Sass file! • Advanced users: see Sass Globbing. • https://github.com/chriseppstein/sass-globbing Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 43. Inheritance Copy and paste no more, theme developers! Inheritance is here! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 44. Inheritance • Inheritance imports syntax and style from another section of your SASS project. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 45. Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 46. More Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 47. Vendor Prefix Woes • While Sass has tons of features out of the box, it is missing one key component: • CSS3 vendor-specific prefixes ! • However, there is a mixin collection that fixes this. • Compass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 48. Compass • Compass is a Sass framework extension focused on CSS3 and layouts. • http://compass-style.org/reference/ compass/ • Essentially, a big set of mixins. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 49. Using Compass • Installing Compass is similar to installing Sass. • http://compass-style.org/install/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 50. Using Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 51. When to Compile Sass • There are two methods of using Sass on a Drupal website. • Letting Drupal Compile Sass • Compiling Sass locally Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 52. Compiling Server Side • There’s a Drupal module for that! • https://drupal.org/project/sass • Consider memory load, revisioning, etc. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 53. Compiling Locally • Most local compilers for Sass require Ruby to be installed. • Two main ways of compiling locally: • Command Line • GUIs Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 54. Local: GUIs • Quite a few GUIs available: • http://sass-lang.com/install • See: Compass.app & Scout Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 55. Local: Command Line • Installing locally is dependent on your OS. • http://sass-lang.com/install • Requires Ruby to be installed. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 56. My Preference? • Personally, I’m in love with Compass.app. • http://compass.kkbox.com/ • Scout is a very good “getting started” app. • http://mhs.github.io/scout-app/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 57. Demo? Demo! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 58. Want to Learn More? Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 59. More Information • http://sass-lang.com/guide • http://compass-style.org/reference/compass/ • http://thesassway.com/beginner/getting-started-with-sass-andcompass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 60. Thanks! Eric Scott Sembrat | Georgia Institute of Technology | 2013