Sass and Compass - Getting Started

Uploaded on


More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Sass & Compass Presented by: Ethan Gardner
  • 2. What is Sass?• CSS preprocessor written in Ruby• Compiles to regular CSS• Adds many helpful features to CSS…Official Documentation:
  • 3. What is Compass?• An extension of Sass• Contains many CSS3 helpers used in modern web development.• Adds many helpful features to CSS…Official Documentation:
  • 4. Retrofitting Compass to Existing Project$ compass create --bare --sass-dir "sass" --css-dir "." --javascripts-dir "assets/scripts"--images-dir "images"Installation:
  • 5. After Running…
  • 6. Changing OptionsTo change these options after Compasshas been added to the project, you canalways edit the “config.rb” file
  • 7. Starting CompassNavigate to the directory that contains the“config.rb” file in the command line andtype:compass watch
  • 8. Variables• Common values can assigned to variables for use throughout a project.• One of the best features of Sass• $variable-name: value;
  • 9. Using VariablesSCSS CSS output$accent-color:#17CF57; h1 { color: #17cf57;h1 { } color:$accent-color;} fieldset { border: 1px solid #17cf57;fieldset { } border:1px solid $accent-color;} caption {caption { background: #17cf57; background:$accent-color; color: #fff; color:#fff; }}
  • 10. Working with Variables• Assign at the top of the file or in an external file• Great for consistency• Benefits are apparent with larger files
  • 11. Nested RulesRules can be nested to add specificity to aselector.
  • 12. Adding Specificity with Nested RulesSCSS CSS outputul { ul { list-style-type: disc; list-style-type: disc; li { } padding:10px; ul li { } padding: 10px;} }
  • 13. Ampersands in Nested RulesWhen nested rules are used, anampersand adds properties to a childselector and is useful for pseudo classeslike :hover.
  • 14. Ampersands in Nested RulesSCSS CSS outputa { a { text-decoration:none; text-decoration: none; &:hover { } text-decoration:underline; a:hover { } text-decoration: underline;} }
  • 15. Ampersands in Nested Rules (cont’d)SCSS CSS outputp { p { font-size:14px; font-size: 14px; &.error { } color:#f00; p.error { font-weight:bold; color: #f00; } font-weight: bold;} }
  • 16. Did you catch the difference?Notice there is no space between p and.error in the CSS from the previousexample.
  • 17. If you WANTED a space…SCSS CSS outputp { p { font-size:14px; font-size: 14px; .error { } color:#f00; p .error { font-weight:bold; color: #f00; } font-weight: bold;} }
  • 18. Multiple NestingYou don’t have to stop at one level ofnesting. Multiple levels of nesting can beVERY powerful.
  • 19. Multiple NestingSCSS CSS output.tablesorter { .tablesorter { border:1px solid #000; border: 1px solid #000; thead { } background:#000; .tablesorter thead { color:#fff; background: #000; th { color: #fff; text-align:center; } } .tablesorter thead th { } text-align: center; tr { } background:#fff; .tablesorter tr { } background: #fff;} }
  • 20. @extend@extend uses the properties of a selectoras the foundation for another selector
  • 21. @extendSCSS CSS output.session { .session, .keynote, .company { padding-left:8px; padding-left: 8px; padding-right:20px; padding-right: 20px; background-repeat:repeat-y;} background-repeat: repeat-y; }.keynote { @extend .session; .keynote { background-image:url(cat-1.png);} background-image: url(cat-1.png); }.company { @extend .session; .company { background-image:url(cat-2.png); background-image: url(cat-2.png);} }
  • 22. @importProperties can be imported from otherSass files.
  • 23. Tips for using @import• Put common properties in external file• Different than using @import in CSS• Imported files should begin with an “_”
  • 24. @importSCSS CSS output// Loads Compass CSS3 helpers /*@import compass/css3; Loads all helpers from Compass’ CSS3 modules and makes it// Loads user defined files available to the rest of our project.@import base;@import reset; Imports the “_base.scss” file and then imports the “_reset.scss” file . */
  • 25. @mixin• Small piece of code that is used to build something larger• Define once and use anywhere• Can accept arguments and parameters• Used via the @include keyword
  • 26. @mixin – User DefinedSCSS CSS output #article {$border-color:#efefef; border: 1px solid #efefef;@mixin content-area { border:1px solid $border-color; padding: 10px 2%; padding:10px 2%; float: left;} width: 60%;#article { } @include content-area; float:left; width:60%;} #aside { border: 1px solid #efefef;#aside { @include content-area; padding: 10px 2%; float:right; float: right; width:30%;} width: 30%; }
  • 27. Compass @mixinCompass provides mixins for commonCSS3 features like gradients, box-shadow,text-shadow, etc.
  • 28. @mixin – CompassSCSS#article { @include background-image(linear-gradient(#dedede, #fff)); color:$content-text-color; @include content-area; // user defined from previous example @include box-shadow; @include text-shadow; float:left; width:60%;}
  • 29. @mixin – Compass (cont’d)CSS output#article { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dedede), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#dedede, #ffffff); background-image: -moz-linear-gradient(#dedede, #ffffff); background-image: -o-linear-gradient(#dedede, #ffffff); background-image: -ms-linear-gradient(#dedede, #ffffff); background-image: linear-gradient(#dedede, #ffffff); color: black; border: 1px solid #efefef; padding: 10px 2%; -webkit-box-shadow: 0px 0px 5px #333333; -moz-box-shadow: 0px 0px 5px #333333; box-shadow: 0px 0px 5px #333333; text-shadow: #efefef 0px 0px 1px; float: left; width: 60%;}