gss / engine

GSS engine
http://gss.github.io
MIT License
2.86k stars 105 forks source link

Parent Ref (^) doesnt work #176

Closed OClement closed 9 years ago

OClement commented 9 years ago

See This Plunk as reference

According to the docs and examples, doing so should work:

.container {
  size: == 500;

  .box1 {
    width: == ^[width] / 2; /* doesnt work */
    height: == 250;

    .box2 {
      height: == ^[height] / 2; /* doesnt work */
    }
  }

}

But it doesn't for me, in various scenarios The values returned are always 0

OClement commented 9 years ago

Just tried a different setup and having more (related, I think) issues;

See This Plunk too


Including snippet for reference:

.container {
    size: == 500 !require;

    .box {
        height: == .container[height] / 2;
        width: == .container[width] / 2;
        /*
            also tried: 
            width: == ^[width] / 2; 
            No Dice
        */
    }   
}
OClement commented 9 years ago

Seems to work as expected using 2.1.x branch

<script src="http://rawgit.com/gss/engine/2.1.x/dist/gss.js"></script>
andering commented 9 years ago

I got also related problem with ^,

body {
    width: == ::window[width];
    width: <= 1200;
    center-x: == ::window[center-x];    
}

#categories.home {  
    width: == ($ body)[width];
    center-x: == ($ body)[center-x];    

    a {                     
        width: == ^[width] / 10;
        border-radius: 50%;
    }   
}

This don't work on line:

//suppose to be #categories.home[width] but ::window[width] assigned
width: == ^[width] / 10  

But this works properly:

body {
    width: == ::window[width];
    width: <= 1200;
    center-x: == ::window[center-x];    

    #categories.home {  
        width: == ($ body)[width];
        center-x: == ($ body)[center-x];    

        a {                     
            width: == ^[width] / 10;
            border-radius: 50%;
        }   
    }
}

Seems to work as expected using 2.1.x branch

<script src="http://rawgit.com/gss/engine/2.1.x/dist/gss.js"></script>