Creating file pathing variables, responsive griding and Sass Mapping with Susy 2.1.2

Sass & Susy variables, responsive griding and Sass Mapping

//Example one creating file pathing variables for loaded font paths (non cdns)
        //Loaded Fonts
        $fontPath: '/sites/all/themes/ept/libraries/_fonts';
        //abel
        $abelPath: 'abel';
        @font-face {
            font-family: 'abelregular';
            src: url('#{$fontPath}/#{$abelPath}/abel-regular-webfont.eot');
            src: url('#{$fontPath}/#{$abelPath}/abel-regular-webfont.eot?#iefix') format('embedded-opentype'),
                 url('#{$fontPath}/#{$abelPath}/abel-regular-webfont.woff') format('woff'),
                 url('#{$fontPath}/#{$abelPath}/abel-regular-webfont.ttf') format('truetype'),
                 url('#{$fontPath}/#{$abelPath}/abel-regular-webfont.svg#abelregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        $able: 'abelregular', Arial, Helvetica, "Nimbus Sans L", sans-serif;
        $master-font: $able;
        
        

//example two 
creating a two column grid variables to extend later 
        .column-one{
            padding: $mobile-padding;
            @include span(4 of 4);
            @include breakpoint($desk){
                padding: $remove-mobile-padding;
                @include span(5 of 10); 
            }
        }
        .column-two{
            padding: $mobile-padding;
            @include span(4 of 4);
            @include breakpoint($desk){
                padding: $remove-mobile-padding;
                @include span(last 5 of 10); 
            }
        }
        .phila{
            @extend .col-one;
        }
        .degree{
            @extend .col-two;
        }



//example three 
//Sass mapping 
        $orange-rgba:rgba(249,182,52,0.5);
        $yellow-rgba: rgba(249,241,2,0.1);
        $slides: (
        one:(url('/images/phila.png') no-repeat 0 0 fixed, $sky), 
        two:(url('/images/bg_work.jpg') repeat-x 0 0 fixed),
        three:(radial-gradient(circle closest-corner at center, $yellow-rgba 0%, $orange-rgba 100%), url('/images/lightpaperfibers.png') repeat 0 0) ,
        four: (url('/images/bg_work.jpg') repeat-x 0 0 fixed),
        five: $yellow-rgba
        );
        
        @each $slide, $bg in $slides {
            .slide-#{$slide} {
                @include background($bg);
            }
        }