Sass - Getting Started with Sass!

  • 1,055 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,055
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
51
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