Your SlideShare is downloading. ×
0
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Sass compass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Sass compass

1,427

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,427
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
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
  • \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

    1. Sass/CompassHTML5/CSS3 Rapid Prototyping Tools
    2. Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley
    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. DRY
    5. DRY• “Don’t Repeat Yourself”• Fundamental best practice of CSS frameworks
    6. Sass• What is Sass?• Nesting• Vars• Mixins
    7. Compass• Save Time!• X-Browser CSS3 mixins• Provides Common CSS development Patterns in an easy-to-use-format
    8. Let’s Talk About Sass
    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. Sass: Nesting
    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. Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY
    13. Sass: Variables
    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. 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. Sass: Mixins
    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. 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. 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. Compass
    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. 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. 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. 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. 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. 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. Compass.app• Java Based• Available for Windows/Mac/Linux• A number of extensions: HTML5 Boilerplate, Blueprint, 960, and more!• No command line!
    28. Demo
    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. Thank You!• Twitter: @nickcooley• Email: nick@homecooley.com• LinkedIn: http://www.linkedin.com/in/ ncooley
    31. Questions?

    ×