Sass compass

1,755 views
1,622 views

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,755
On SlideShare
0
From Embeds
0
Number of Embeds
20
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
  • 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?

    ×