dawidw

// ----
// Sass (v3.3.0.rc.5)
// Compass (v1.0.0.alpha.18)
// ----

/* 1. & - Reference symbol */

.block { 
  background: white;
  & .red { 

dawidw

/* 1. reference symbol ( & ) */
/* you are probably familiar with reference symbol which allows you 
   to reference a parent element: */
.block.red {
  color: red;
}

/* but you can also put it after some class which can be very usefull while
   facing some IE related issues: */
.ie7 .block.red {

dawidw

    +-modules
    | +-_post.scss
    +-view
    |   +-views.scss
    |   +-rails_views
    |     +-_posts_controller.scss
    |   +-responsive
    |     +-tablet
    |     +-mobile
    .

dawidw

.block { 
  &.red { 
      color: red;
  }
}

dawidw

.block{
  .ie7 &.red{
      color: green;
  }
}

dawidw

/* posts.scss */
.posts{
  &.show{
    div.posts_list{
      div.post{
        background: whitesmoke;
        p.post_title{
          font-size: 16px;
        }
      }

dawidw

@mixin you-can-do-it {
    @content;
}

@include you-can-do-it {
  .yes-you-can { color: red }
}

dawidw

@mixin fight-with($monster) {
  @if $monster == mechagodzilla {
    .post__title{ &:after { @content } }
  }
  @else if $monster == spacegodzilla {
    @content; 
  }
}

.post--mechagodzilla {

dawidw

%post-skeletor{ 
    font:{ size: 12; weight: 700;}
    box-sizing: border-box;
    padding: 5px;
    margin: 10px;
    border: 1px solid whitesmoke;
}

.post-class {
    font:{ size: 12; weight: 700;}

dawidw

.post--big{
  width: percentage(.5);
  font-size: max(12px, 14px, 16px);
  background: rgba(231, 0.8, 2, .8);
}

$title: 'This is title';
.post__title{
  content: quote($title);
}