krisbulman

<div class="example">Calc Test</div>

krisbulman

<div class="example">Breakpoint Test</div>

krisbulman

<div class="l-example">
  <div class="l-example__a">A<br/>&nbsp;</div>
  <div class="l-example__b">B</div>
  <div class="l-example__c">C</div>
</div>

krisbulman

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

krisbulman

<table>
  <tbody>
    <tr class="odd">
      <td>test</td>
      <td>test</td>  
    </tr>
    <tr class="even">
      <td>test</td>
      <td>test</td>  
    </tr>

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