hoja de estilos sass

disquera.scss

@import '../bower_components/bootstrap-sass/assets/stylesheets/_bootstrap.scss';

@import 'reset';
@import 'wh';
@import 'general';

* {
   outline: 1px solid #888;
}



@debug "SASS disquera listo";

general.scss

$header_height: 4rem;

#cabecera,
#pie-pagina,
#principal
{
   @extend .container-fluid;
}


#cabecera, #pie-pagina {
   position: fixed;
   @extend .w-100-v;
   // lo mismo que:
   // width: 100vw;
}


#cabecera {
   height: $header_height;
   top:0;
}

#principal {
   padding-top: $header_height;
}
#pie-pagina {
   height: 3rem;
   bottom: 0;
}

reset.scss

html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

ul, li {
   margin: 0;
}

li {
   list-style: none;
}

wh.scss

$breakpoints: (
xs 0px,
sm 640px,
md 1024px,
lg 1200px,
xl 1600px
);

$num_steps: 20;
$step: 5;
$step_value_pct:5%;
$step_value_vh:5vh;
$step_value_vw:5vw;

$unit_height: 72px;
$num_units: 10;

@for $i from 0 through $num_units {

   .h-#{($i)}x {
      height: $i * $unit_height;
   }

}

@each $breakpoint in $breakpoints {
   @media screen and (min-width: #{nth($breakpoint,2)}) {

      @for $i from 0 through $num_units {

         .h-#{nth($breakpoint,1)}-#{($i)}x {
            height: $i * $unit_height;
         }

      }

      @for $i from 1 through $num_steps {

         // percentage
         .w-#{nth($breakpoint,1)}-#{($i * $step)} { width: $step_value_pct * $i; }
         .h-#{nth($breakpoint,1)}-#{($i * $step)} { height: $step_value_pct * $i; }

         // viewport percentage
         .w-#{nth($breakpoint,1)}-#{($i * $step)}-v { width: $step_value_vw * $i; }
         .h-#{nth($breakpoint,1)}-#{($i * $step)}-v { height: $step_value_vh * $i; }

         .w-#{($i * $step)}-v { width: $step_value_vw * $i; }
         .h-#{($i * $step)}-v { height: $step_value_vh * $i; }

      }
   }
}