sass_compass_unleashed/presentation/07_inheiritance.slides

!SLIDE
# Inheritance

!SLIDE
# Inception rule!
<img src="/assets/InceptionArch_Slusher.jpg" width='800px'>

!SLIDE
<img src='/assets/36kou7.jpg' height='600px'>

!SLIDE
## Well you can but it gets messy
``` scss
.foo {
  width: 5px;
  .bar {
    height: 20px;
    .baz {
      color : red;
      .what-comes-after-baz {
        border : green solid 1px;
        &.something {
          @extend .float-left;
        }
      }    
    }
  }
}
```

!SLIDE
# And slow

!SLIDE

## Selector layout

``` scss
.release_title a{
  @extend h3;
  @include adjust-font-size-to(20px, 1);
  @include trailer;
  
  text-decoration : none;
  display         : block;
  
  &:hover {
   color:$hover-color; 
  }
}
```