yodasw16

var gulp = require('gulp');
    compass = require('gulp-compass')

var sources = {
    styles : 'client/app/sass/**/*.scss'
}

gulp.task('styles', function() {
    gulp.src('sources.styles')
        .pipe(compass({

yodasw16

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----

@import "breakpoint";
$break: 32em;

// How to do media queries with nested selectors

yodasw16

<h2>Choice</h2>
<ul class="choice-list">
    <li class="choice-list__choice"><a href="#">First Choice</a></li>
    <li class="choice-list__choice"><a href="#">Last Choice</a></li>
</ul>

<h2>Split Choice</h2>
<ul class="choice-list--split">
    <li class="choice-list__choice--first"><a href="#">First Choice</a></li>
    <li class="choice-list__choice"><a href="#">Last Choice</a></li>

yodasw16

<ul class="split">
    <li>
        <span class="split__title">Name:</span> Dave
    </li>
    <li>
        <span class="split__title">Description:</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis est id quam tincidunt iaculis. Sed at nisi consequat, viverra est a, iaculis lacus. Nunc erat lorem, adipiscing sed lacinia pellentesque, accumsan at dolor. Vivamus sollicitudin eros sit amet odio porttitor pretium.
    </li>
</ul>