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

Sass - Getting Started with Sass!

on

  • 950 views

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!

Statistics

Views

Total Views
950
Views on SlideShare
950
Embed Views
0

Actions

Likes
3
Downloads
32
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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

Sass - Getting Started with Sass! Sass - Getting Started with Sass! Presentation Transcript

  • Theming with Sass Bringing sassy to CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • 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
  • You can test out Sass during this presentation! http://sassmeister.com/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Knowing Your Audience Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Who has heard of Sass? The preprocessor, not the attitude. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Who has used Sass? It’s super effective! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • State of CSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Intro to Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • History • Syntactically Awesome Stylesheets • First developed in 2007. ! • Serves as: • Scripting language. • Preprocessor for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Function • Sass compiles into CSS files. ! • Two formatting conventions • .SASS • .SCSS Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • .SCSS • SCSS follows conventions of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • .SASS • SASS focuses on indentation and shorthand. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Hard to Choose? • Sass can convert between SASS and SCSS with relative ease. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • config.rb Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • config.rb Almost always auto-generated! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • /sass/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Sassy Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Features • Sass has 5 primary features. • Variables • Nesting • Mixins • Partials • Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Variables Let’s time-travel back to Computer Science 1101. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Variables • Pro-tip: Variables have scope based on where they are defined. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Nesting Not the empty-nest variety. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Nesting • Nested rules allow you to break up endlessly long selectors of CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Nesting Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Mixins It’s time to cook (up some mixins)! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Mixins Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Partials Spring cleaning for CSS. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Visualizing Partials _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Visualizing Partials Sass CSS _header.scss _sidebar.scss global.scss global.css _page.scss Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Creating Partials • Creating partials can be done in two steps. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Step 1: Create Partial • Create a _filename.scss in your SASS folder. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Inheritance Copy and paste no more, theme developers! Inheritance is here! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Inheritance • Inheritance imports syntax and style from another section of your SASS project. Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Inheritance Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • More Features Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • 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
  • Using Compass • Installing Compass is similar to installing Sass. • http://compass-style.org/install/ Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Using Sass Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • 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
  • 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
  • Local: GUIs • Quite a few GUIs available: • http://sass-lang.com/install • See: Compass.app & Scout Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • 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
  • Demo? Demo! Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • Want to Learn More? Eric Scott Sembrat | Georgia Institute of Technology | 2013
  • 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
  • Thanks! Eric Scott Sembrat | Georgia Institute of Technology | 2013