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

.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

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

dawidw

/*  _posts_controller.scss */
.posts.show .post {
  /* view specific styles */
}

/* _post.scss */
.post {
  background: whitesmoke;
}

dawidw

$el : "post";
.#{$el} { 
    background: blue;
    & .#{$el}__title {
        background: red;
    }
}

dawidw

/* _post.scss */
$el : "post";
.#{$el} { 
  background: blue;
}
  .#{$el}__title {
    background: red;
  }

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 {