krisbulman

Here is a quick project setup and usage tutorial:

Compass Project Creation

1. Install font-icons

sudo gem install font-icons --pre

1. Create a new bare bones compass project using the compass install instructions

krisbulman

function countCSSRules() {
    var results = '',
        log = '';
    if (!document.styleSheets) {
        return;
    }
    for (var i = 0; i < document.styleSheets.length; i++) {
        countSheet(document.styleSheets[i]);
    }
    function countSheet(sheet) {

krisbulman

<script type="text/javascript">
  var meeting = {number:"1"};

  while (meeting==meeting) {
    document.write( '1++');
  }
</script>

krisbulman

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Breakpoint (v2.4.1)
// ----

  @import "breakpoint";
// Sass
$message-padding: .25em .5em !default;
$message-width: 80% !default;

krisbulman

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "compass";

// Retina Wrapper
// Wrap anything in a resolution query
//

krisbulman

// Sass v3.2.5

// Sass v3.2.5

// Answer to: How can I do this without typing "background-position" and "14px" twice?
// https://www.facebook.com/groups/SassyCSS/
 
// because you're using vanilla sass, and not a sprite engine like that provided by compass,
// then you can't use the magic of magic selectos. Instead you would have to create a mixin
// to reduce repeatable code, in the example I have created, you would be relying on a static

krisbulman

// Sass v3.2.5

// Just realized: In Sass “&” can be a standalone referent
// to the parent class. so ".foo, .bar, &" is a valid selector.
// @lonelytype

.foo {
  .bar, & {
    margin: 0;
  }

krisbulman

RUBY RESOURCES

Note: this list was born in the FB group Ruby Programming Language

Commonly used resources are found here: http://iwanttolearnruby.com/

FREE ONLINE RESOURCES

krisbulman

<div class="container">
  <!-- Note the order in DOM and rendered -->
  <div class="content">content</div>
  <div class="sidebar1">sidebar1</div>
  <div class="sidebar2">sidebar2</div>
</div>

krisbulman

<div class="container">
  <!-- Note the order in DOM and rendered -->
  <div class="content">content</div>
  <div class="sidebar1">sidebar1</div>
  <div class="sidebar2">sidebar2</div>
</div>