search

thoughtbot / neat

A fluid and flexible grid Sass framework
https://neat.bourbon.io/
MIT License
4.42k stars 424 forks source link

Media query conversion bug when compiling scss to css #273

Closed Anima-t3d closed 9 years ago

Anima-t3d commented 9 years ago

I'm using neat 1.7 and updated from 1.5. Previously I used built in neat from prepros (4.1 at that time). However a few months later I have to update the project and in the meanwhile prepros changed to 5.x and the built in neat no longer worked. I then installed neat using gem install and have 1.7 successfully installed (I can see the folders). So the bug described below may or may not be due to neat and/or prepros, I would like if someone could clear it up so I can file the bug accordingly (either here or prepros). Perhaps this is caused by https://github.com/thoughtbot/neat/commit/a9da0cf96816dfe470a926c8b296d93c3375cb27?

When having code like this in scss:

@include media(max-width em(1620))
{
    padding: 25px;
}

Outputs in css to this (notice extra and, which leads to website not being responsive):

@media screen and (max-width: 101.25em) and  {
    .message {
      padding: 25px; } }

When having code like this in scss (using breakpoint definitions):

@include media($t800)
{
    border-width: 6px;
}

Outputs in css to this (notice no extra and):

@media screen and (max-width: 801px)  {
      #wrapper #frame {
        border-width: 6px; } }
bluegray commented 9 years ago

What version of sass are you using? I had similar issues with libsass not supporting the not operator. This fixed my issue: #254

Anima-t3d commented 9 years ago

There seems to be an open issue in libsass pullrequest: https://github.com/sass/libsass/pull/562 How can I find out what the current version is that I'm running?

Anima-t3d commented 9 years ago

I found out how to find my current version, but it seems that I have 2 versions running? 3.4.7, 3.2.10

$>gem list

*** LOCAL GEMS ***

bigdecimal (1.2.0)
bitters (0.10.1)
bourbon (4.0.2)
io-console (0.4.2)
json (1.7.7)
minitest (4.3.2)
neat (1.7.0)
psych (2.0.0)
rake (0.9.6)
rdoc (4.0.0)
sass (3.4.7, 3.2.10)
test-unit (2.0.0.0)
thor (0.19.1)
kaishin commented 9 years ago

This seems to me like a Sass version issue since the original example worked just fine with latest version of Libsass. Please reopen if you come to a different conclusion.