Sass and Compass - Getting Started
Upcoming SlideShare
Loading in...5

Sass and Compass - Getting Started






Total Views
Views on SlideShare
Embed Views



3 Embeds 62 50 10 2



Upload Details

Uploaded via as Adobe PDF

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Sass and Compass - Getting Started Sass and Compass - Getting Started Presentation Transcript

  • Sass & Compass Presented by: Ethan Gardner
  • What is Sass?• CSS preprocessor written in Ruby• Compiles to regular CSS• Adds many helpful features to CSS…Official Documentation:
  • What is Compass?• An extension of Sass• Contains many CSS3 helpers used in modern web development.• Adds many helpful features to CSS…Official Documentation:
  • Retrofitting Compass to Existing Project$ compass create --bare --sass-dir "sass" --css-dir "." --javascripts-dir "assets/scripts"--images-dir "images"Installation:
  • After Running…
  • Changing OptionsTo change these options after Compasshas been added to the project, you canalways edit the “config.rb” file
  • Starting CompassNavigate to the directory that contains the“config.rb” file in the command line andtype:compass watch
  • Variables• Common values can assigned to variables for use throughout a project.• One of the best features of Sass• $variable-name: value;
  • 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; }}
  • Working with Variables• Assign at the top of the file or in an external file• Great for consistency• Benefits are apparent with larger files
  • Nested RulesRules can be nested to add specificity to aselector.
  • Adding Specificity with Nested RulesSCSS CSS outputul { ul { list-style-type: disc; list-style-type: disc; li { } padding:10px; ul li { } padding: 10px;} }
  • Ampersands in Nested RulesWhen nested rules are used, anampersand adds properties to a childselector and is useful for pseudo classeslike :hover.
  • Ampersands in Nested RulesSCSS CSS outputa { a { text-decoration:none; text-decoration: none; &:hover { } text-decoration:underline; a:hover { } text-decoration: underline;} }
  • 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;} }
  • Did you catch the difference?Notice there is no space between p and.error in the CSS from the previousexample.
  • 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;} }
  • Multiple NestingYou don’t have to stop at one level ofnesting. Multiple levels of nesting can beVERY powerful.
  • 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;} }
  • @extend@extend uses the properties of a selectoras the foundation for another selector
  • @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);} }
  • @importProperties can be imported from otherSass files.
  • Tips for using @import• Put common properties in external file• Different than using @import in CSS• Imported files should begin with an “_”
  • @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 . */
  • @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
  • @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%; }
  • Compass @mixinCompass provides mixins for commonCSS3 features like gradients, box-shadow,text-shadow, etc.
  • @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%;}
  • @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%;}