Sass compass
Upcoming SlideShare
Loading in...5
×
 

Sass compass

on

  • 1,509 views

 

Statistics

Views

Total Views
1,509
Slideshare-icon Views on SlideShare
1,494
Embed Views
15

Actions

Likes
0
Downloads
20
Comments
0

4 Embeds 15

http://www.linkedin.com 7
http://paper.li 6
http://a0.twimg.com 1
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

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
  • \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 Sass compass Presentation Transcript

  • Sass/CompassHTML5/CSS3 Rapid Prototyping Tools
  • Who is this guy? Nick Cooley Principal Front-End Architect, TandemSeven: http://www.tandemseven.com @nickcooley
  • 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?
  • 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 CSS and implements various features that are useful for creating manageable stylesheets.”• Ruby Based
  • Sass: Nesting
  • Sass: Nesting• CSS: in order to contextually apply selectors, you might need to repeat selectors.• This can be Repetitive, potentially messy and confusing
  • Sass: Nesting•Sass: Allows you to nest selectors within a parent selector.•This provides an approach that’s clean, concise, unique and DRY
  • Sass: Variables
  • 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
  • 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
  • Sass: Mixins
  • 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
  • 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?
  • 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);}
  • Compass
  • 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.
  • 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!
  • 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)); }}
  • 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)); }}
  • 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);
  • 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...
  • Compass.app• Java Based• Available for Windows/Mac/Linux• A number of extensions: HTML5 Boilerplate, Blueprint, 960, and more!• No command line!
  • Demo
  • 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/
  • Thank You!• Twitter: @nickcooley• Email: nick@homecooley.com• LinkedIn: http://www.linkedin.com/in/ ncooley
  • Questions?