rpearce

Feature: Harness lightning
  In order to make electricity work
  As a scientist
  I want to harness the power of lightning... or something like that

  Background:
    Given I am an inquisitive scientist
    And I do not suffer from any mental illness(es)

    Scenario: Using a kite

rpearce

<div id='content'>
  <div class='title'>
    <h1>Airplane!</h1>
    <a href='/'>Home</a>
  </div>
</div>

rpearce

#content
 .title
   %h1 Airplane!
   = link_to 'Home', home_url

rpearce

#menu li a {  
  display: block;  
  float: left;  
  padding: 4px 8px;  
  text-decoration: none;  
  background: #2277aa;  
  color: white;  
}

rpearce

.converge-se
  color: $sexy
  p
    padding: 20px
    text-align: left
    .crazy-paragraph
      font-size: 80px
  span
    color: $slightly-less-sexy

rpearce

.converge-se {
  color: $sexy;
  p {
    padding: 20px;
    text-align: left;
    .crazy-paragraph {
      font-size: 80px; }
  }
  span {
    color: $slightly-less-sexy; }

rpearce

.converge-se {
  color: red; }
  .converge-se p {
    padding: 20px;
    text-align: left; }
    .converge-se p .crazy-paragraph {
      font-size: 80px; }
  .converge-se span {
    color: #ff6666; }

rpearce

$myvariable: #123456;
$another-variable: location;
$yet_another: whoahcrazy1;

rpearce

.rando-class { color: $myvariable; }

(compiled)

.rando-class {
  color: #123456; }

rpearce

.rando-class { color: $myvariable; }

(compiled)

.rando-class {
  color: #123456; }