grid-span not working without breakpoint

Question

In following code sample I am trying to define width of .l-branding div to 5 grids on mobile devices and changing the width to 3 grids on breakpoint $tab. With in the breakpoint its working as desired but for mobile devices the grid-span is not making any changes at all. Similar is the case with .l-region--navigation and .l-region--header

Am I doing some thing wrong ?

  .l-branding {
    @include grid-span(5, 1); //mobile
    background:url(../../../images/bg-footer-credits.png) center center;
    text-align:center;
    @include breakpoint($tab){
    @include grid-span(3, 1);
    height:104px;
    }  
  }
 // end l-branding 

  .l-region--navigation {
  @include grid-span(7, 6); //mobile
  @include breakpoint($tab){
    @include grid-span(6, 4);
    }
  }
  .l-region--header {
  @include grid-span(12, 1); //mobile
  clear:both;
  @include breakpoint($tab){
    @include grid-span(3, 10);
    clear:none;
    }
  }