dawidw

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

/* 1. & - Reference symbol */

.block { 
  background: white;
  & .red { 

dawidw

$icons: smile, poop, godzilla;

@each $icon in $icons {
  .icon-#{$icon} { background-image: url('/icons/#{$icon}.png') }   
}

dawidw

$font-list: Helvetica, Arial, sans-serif;

.post {
    font-family: $font-list;
}

dawidw

@function double($variable){
 @return $variable *2;
}

.post{
  font-size: double(2px);
}

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);
}

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

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

.post--mechagodzilla {

dawidw

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

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

dawidw

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

dawidw

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