Your SlideShare is downloading. ×
0
Sass/CompassHTML5/CSS3 Rapid Prototyping Tools
Who is this guy?                      Nick Cooley     Principal Front-End Architect,                     TandemSeven:     ...
Why Use a CSS     Framework?• Instead of repetitively implementing  patterns and values, you can  modularize your CSS.• CS...
DRY
DRY• “Don’t Repeat Yourself”• Fundamental best practice of CSS  frameworks
Sass• What is Sass?• Nesting• Vars• Mixins
Compass• Save Time!• X-Browser CSS3 mixins• Provides Common CSS development Patterns in an easy-to-use-format
Let’s Talk About      Sass
What is Sass?• Stands for “Syntactically Awesome  StyleSheets”• “Sass both provides a simpler, more  elegant syntax for CS...
Sass: Nesting
Sass: Nesting• CSS: in order to contextually apply  selectors, you might need to repeat  selectors.• This can be Repetitiv...
Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise...
Sass: Variables
Sass: Variables• Allow you to quickly parameterize  your CSS• Create diverse variations in  seconds!• Helps you create des...
Sass: Variables• Imagine you are using a color as a  theme throughout your CSS.• Imagine the $color1 variable spread  all ...
Sass: Mixins
Sass: Mixins• Mixins:Sass :: Functions:Javascript• Allow you to define patterns for  reuse• Mixins can be imported across  ...
Sass: Mixins• Imagine the following case: You  have a standard button theme you  use across your site. It has: • Rounded C...
Sass: Mixinsdiv[role="main"] li button {  border: 1px solid #d8dee7;  background-image: -webkit-gradient(linear, 50% 0%, 5...
Compass
What is Compass?• “...open-source CSS authoring  framework which uses the Sass  stylesheet language to make writing  style...
Compass• X-Browser CSS3 mixins • Rounded Corners        • Box Shadow • Gradients              • Text Shadow• Common CSS de...
Compassbutton {  border:1px solid #acbed3;  @include background-image(linear-gradient(#fff, #d8dee7));  padding:3px 14px; ...
Compassbutton {  border:1px solid #acbed3;    @include background-image(linear-gradient(#fff, #d8dee7));    padding:3px 14...
Compass•   Instead of:    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop...
How do I use?• Both Sass and Compass are ruby-  based applications.• Most users use the terminal to run  their instances• ...
Compass.app• Java Based• Available for Windows/Mac/Linux• A number of extensions: HTML5  Boilerplate, Blueprint, 960, and ...
Demo
Links•   Sample files: https://gist.github.com/1432176•   Sass Site: http://www.sass-lang.com•   Compass Site: http://compa...
Thank You!• Twitter: @nickcooley• Email: nick@homecooley.com• LinkedIn: http://www.linkedin.com/in/  ncooley
Questions?
Upcoming SlideShare
Loading in...5
×

Sass compass

1,438

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,438
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • How many folks use CSS on a regular basis?\nHow many folks use the same color or property over and over again? Making modifying it kind of a pain?\n\nDRY?\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Sass compass"

    1. 1. Sass/CompassHTML5/CSS3 Rapid Prototyping Tools
    2. 2. Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley
    3. 3. Why Use a CSS Framework?• Instead of repetitively implementing patterns and values, you can modularize your CSS.• CSS is limited and difficult to extend by itself.• When prototyping, shouldn’t you focus more on the, you know, prototyping?
    4. 4. DRY
    5. 5. DRY• “Don’t Repeat Yourself”• Fundamental best practice of CSS frameworks
    6. 6. Sass• What is Sass?• Nesting• Vars• Mixins
    7. 7. Compass• Save Time!• X-Browser CSS3 mixins• Provides Common CSS development Patterns in an easy-to-use-format
    8. 8. Let’s Talk About Sass
    9. 9. What is Sass?• Stands for “Syntactically Awesome StyleSheets”• “Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.”• Ruby Based
    10. 10. Sass: Nesting
    11. 11. Sass: Nesting• CSS: in order to contextually apply selectors, you might need to repeat selectors.• This can be Repetitive, potentially messy and confusing
    12. 12. Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY
    13. 13. Sass: Variables
    14. 14. Sass: Variables• Allow you to quickly parameterize your CSS• Create diverse variations in seconds!• Helps you create design standards for your CSS.• Using a main color in a number of
    15. 15. Sass: Variables• Imagine you are using a color as a theme throughout your CSS.• Imagine the $color1 variable spread all over your CSS? How easy to
    16. 16. Sass: Mixins
    17. 17. Sass: Mixins• Mixins:Sass :: Functions:Javascript• Allow you to define patterns for reuse• Mixins can be imported across projects, helping you to create your own framework
    18. 18. Sass: Mixins• Imagine the following case: You have a standard button theme you use across your site. It has: • Rounded Corners • Gradients • Drop Shadows (multiple)• What would the CSS for such a button look like?
    19. 19. Sass: Mixinsdiv[role="main"] li button { border: 1px solid #d8dee7; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d8dee7)); background-image: -webkit-linear-gradient(#ffffff, #d8dee7); background-image: -moz-linear-gradient(#ffffff, #d8dee7); background-image: -o-linear-gradient(#ffffff, #d8dee7); background-image: -ms-linear-gradient(#ffffff, #d8dee7); background-image: linear-gradient(#ffffff, #d8dee7); padding: 3px 14px; font-size: 12px; color: #3b557d; -webkit-border-radius: 20px 20px; -moz-border-radius: 20px / 20px; -o-border-radius: 20px / 20px; -ms-border-radius: 20px / 20px; -khtml-border-radius: 20px / 20px; border-radius: 20px / 20px; cursor: pointer;}div[role="main"] li button.primary { border: 2px solid #3b557d; padding: 5px 15px; -webkit-border-radius: 22px 22px; -moz-border-radius: 22px / 22px; -o-border-radius: 22px / 22px; -ms-border-radius: 22px / 22px; -khtml-border-radius: 22px / 22px; border-radius: 22px / 22px;}div[role="main"] li button.disabled { opacity: .8;}div[role="main"] li button:hover { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d8dee7), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#d8dee7, #ffffff); background-image: -moz-linear-gradient(#d8dee7, #ffffff); background-image: -o-linear-gradient(#d8dee7, #ffffff); background-image: -ms-linear-gradient(#d8dee7, #ffffff); background-image: linear-gradient(#d8dee7, #ffffff);}
    20. 20. Compass
    21. 21. What is Compass?• “...open-source CSS authoring framework which uses the Sass stylesheet language to make writing stylesheets powerful and easy.”• Provides a number of community- created mixins and modules to help integrate some of the most popular design patterns on the web.
    22. 22. Compass• X-Browser CSS3 mixins • Rounded Corners • Box Shadow • Gradients • Text Shadow• Common CSS development Patterns • Reset.css • Sprites • Clearfix • Web Fonts • CSS3 Pie • More!
    23. 23. Compassbutton { border:1px solid #acbed3; @include background-image(linear-gradient(#fff, #d8dee7)); padding:3px 14px; font-size:12px; color:#3b557d; @include border-radius(7px, 7px); cursor:pointer; &.primary { border:2px solid #3b557d; padding:5px 15px; @include border-radius(9px, 9px); } &.disabled { opacity: .8; } &:hover { @include background-image(linear-gradient(#d8dee7, #fff)); }}
    24. 24. Compassbutton { border:1px solid #acbed3; @include background-image(linear-gradient(#fff, #d8dee7)); padding:3px 14px; font-size:12px; color:#3b557d; @include border-radius(7px, 7px); cursor:pointer; &.primary { border:2px solid #3b557d; padding:5px 15px; @include border-radius($border-radius+2, $border-radius+2); } &.disabled { opacity: .8; } &:hover { @include background-image(linear-gradient(#d8dee7, #fff)); }}
    25. 25. Compass• Instead of: background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d8dee7)); background-image: -webkit-linear-gradient(#ffffff, #d8dee7); background-image: -moz-linear-gradient(#ffffff, #d8dee7); background-image: -o-linear-gradient(#ffffff, #d8dee7); background-image: -ms-linear-gradient(#ffffff, #d8dee7); background-image: linear-gradient(#ffffff, #d8dee7);• Compass Provides a mixin for gradients: @include background-image(linear-gradient(#d8dee7, #fff));• Instead of: -webkit-border-radius: 20px 20px; -moz-border-radius: 20px / 20px; -o-border-radius: 20px / 20px; -ms-border-radius: 20px / 20px; -khtml-border-radius: 20px / 20px; border-radius: 20px / 20px;• Compass Provides a mixin for border-radius: @include border-radius(20px, 20px);
    26. 26. How do I use?• Both Sass and Compass are ruby- based applications.• Most users use the terminal to run their instances• If you don’t want to install Ruby or hate command line...
    27. 27. Compass.app• Java Based• Available for Windows/Mac/Linux• A number of extensions: HTML5 Boilerplate, Blueprint, 960, and more!• No command line!
    28. 28. Demo
    29. 29. Links• Sample files: https://gist.github.com/1432176• Sass Site: http://www.sass-lang.com• Compass Site: http://compass-style.org• Compass.app Site: http://compass.handlino.com/• Manning Sass Book: http://www.manning.com/netherland/• https://addons.mozilla.org/en-US/firefox/addon/ firesass-for-firebug/
    30. 30. Thank You!• Twitter: @nickcooley• Email: nick@homecooley.com• LinkedIn: http://www.linkedin.com/in/ ncooley
    31. 31. Questions?
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×