Sass and Compass - Getting Started

  • 2,156 views
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

Views

Total Views
2,156
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
2

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

Transcript

  • 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:http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
  • 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:http://compass-style.org/reference/compass/
  • 4. Retrofitting Compass to Existing Project$ compass create --bare --sass-dir "sass" --css-dir "." --javascripts-dir "assets/scripts"--images-dir "images"Installation:http://compass-style.org/install/
  • 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%;}