Chalarangelo/mini.css

Arithmetic operation in @media queries

ojullien opened this issue · 5 comments

ojullien commented
  • Framework Version: mini.css v2.3.7
  • Flavor used: mini-default
  • Operating System/Browser: Debian 9.2, Sass 3.5.2 (Bleeding Edge), Compass 1.0.3 (Polaris)
  • Code to reproduce: @media screen and (max-width: 768px (-1px)) {
  • Bug description:

Arithmetic operation like ( in _utility_mixins.scss file )
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
is translated to
@media screen and (max-width: 768px (-1px)) {
which goes wrong in a web browser ( like Chrome 62.0.3202.62 )

If we modify
@media screen and (max-width: #{$hidden-medium-breakpoint}-1px) {
to
@media screen and (max-width: #{$hidden-medium-breakpoint - 1}) {
we obtain
@media screen and (max-width: 767px) {
which goes right

I think it is about interpolating variables

Chalarangelo commented

Whoops, my bad! Thanks for noticing. This will be fixed asap. Expect another hotfix!

  • 👍1
Chalarangelo commented

Update: Both my setups that use node-sass compile this as expected, resulting in 767px instead of 768px (-1px). This could be a problem with the specific version of Sass. It might require further investigating, as well as some more input from people if this really is a common issue. I am going to test this further and get back to you.

ojullien commented
  • 👍1
ojullien commented

I confirm, works well with node v6.11.5, npm 5.5.1, node-sass 4.5.3
The bug appears with gem sass (v3.5.2) from Ruby

Chalarangelo commented

I'm marking this as resolved, provided that everything works as intended using the listed devDependencies in node. Thanks for testing this out!