Nanded City ( Call Girls ) Pune 6297143586 Hot Model With Sexy Bhabi Ready ...
Sass - Tutorial
1. Theming with Sass
Bringing sassy to CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
2. 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
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
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
Eric Scott Sembrat | Georgia Institute of Technology | 2013
over again).
•These are not features; they’re nightmares!
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. Eric Scott Sembrat | Georgia Institute of Technology | 2013
History
•Syntactically Awesome Stylesheets
•First developed in 2007.
!
•Serves as:
•Scripting language.
•Preprocessor for CSS.
15. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Function
•Sass compiles into CSS files.
!
•Two formatting conventions
•.SASS
•.SCSS
16. Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SCSS
•SCSS follows conventions of CSS.
17. Eric Scott Sembrat | Georgia Institute of Technology | 2013
.SASS
•SASS focuses on indentation and short-hand.
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
24. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Features
•Sass has 5 primary features.
•Variables
•Nesting
•Mixins
•Partials
•Inheritance
25. Let’s time-travel back to Computer Science 1101.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
26. 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!
27. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Variables
•Pro-tip: Variables have scope based on
where they are defined.
28. Not the empty-nest variety.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting
29. Eric Scott Sembrat | Georgia Institute of Technology | 2013
Nesting
•Nested rules allow you to break up
endlessly long selectors of CSS.
31. It’s time to cook (up some mixins)!
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Mixins
32. 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.
34. Spring cleaning for CSS.
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Partials
35. 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.
36. Visualizing Partials
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
37. Visualizing Partials
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
38. Visualizing Partials
Sass CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
global.scss global.css
39. Visualizing Partials
Sass CSS
Eric Scott Sembrat | Georgia Institute of Technology | 2013
_header.scss
_sidebar.scss
_page.scss
inherits compiles
global.scss global.css
inherits
inherits
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 non-partial
Eric Scott Sembrat | Georgia Institute of Technology | 2013
Sass file!
• Advanced users: see Sass Globbing.
• https://github.com/chriseppstein/sass-globbing
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
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. 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.
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-and-compass
Eric Scott Sembrat | Georgia Institute of Technology | 2013