CODEWITHSUNDEEP
cssresponsive-designmedia-queriesbourbonneat
designerNProgrammer
designerNProgrammer

Reputation: 2701

Neat emitting Css with width of a container NaN%

I created a demo neat project and gave it columns in Sass. here is the code.

@import "../bourbon/bourbon"; // 
@import "../neat/neat-helpers"; 


$column: 0px;
$gutter: 0px;
$grid-columns: 10;
$max-width: 100%;


$large: new-breakpoint(max-width 1025px 10);
$medium: new-breakpoint(max-width 1024px 8);
$small: new-breakpoint(max-width 640px 4);

@import "../neat/neat";
body
{
    margin: 0;
    padding: 0;
} 

.outerContainer
{
    @include outer-container;
}

.leftCol
{
    @include span-columns(5);
    background-color: red;
    color:white;
    padding:10px;
    @include media($small) {
        @include span-columns(4);
    }


    @include media($medium) {
        @include span-columns(8);
    }


}
.rightCol
{
    @include span-columns(5);
    background-color: blue;
    color:white;
    padding:10px;   
    @include media($small) {
        @include span-columns(4);
    }

    @include media($medium) {
        @include span-columns(2);
    }



}

Now when i see the emmited Css it sasy this

 margin-right: NaN%;
  width: NaN%; }

Why is this showing Nan%? Please tell me where am i doing it wrong? Thanks.

Upvotes: 1

Views: 166

Answers (1)

Martin Braun
Martin Braun

Reputation: 12599

Please check the content of the imported CSS files.

NaN% stands for "not-a-number" and appears when you get any calculation errors such as dividing something by 0.

Upvotes: 1

Related Questions