1

Here's my code: https://github.com/Oreqizer/susy-tutorial/blob/master/app/styles/modals/_layout.scss lines 12 to 17, extract here:

.wrap {
  @include container();
  @include breakpoint(768px) {
    @include show-grid(9);
  }
  @include breakpoint(1024px) {
    @include show-grid(16);
  }
}

When trying to compile if uncommented, i get:

Sass error: { status: 1,
  file:
  '/home/idefixx/data/work/web/tutorials/susy/app/styles/modals/_layout.scss',
  line: 53,
  column: 38,
  message: 'cannot add or subtract numbers with incompatible units',
  code: 1 }

I am compiling using LibSass. Vanilla Sass failed the same way. Everything updated.

If I remove units from args, e.g.: breakpoint(768), it compiles, but does nothing. Any idea why this happens?

EDIT:

This is the compiled .css if no units are present:

.wrap {
  max-width: 1140px;
  margin-left: auto;
  margin-right: auto;
  background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
  background-size: 12.8205128205%;
  background-origin: content-box;
  background-clip: content-box;
  background-position: left top; }
  .wrap:after {
    content: " ";
    display: block;
    clear: both; }
  @media (min-width: 3841.25em) {
    .wrap {
      background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
      background-size: 11.3636363636%;
      background-origin: content-box;
      background-clip: content-box;
      background-position: left top; }
      .wrap .wrapper {
        width: 3838.75em; } }
  @media (min-width: 5121.25em) {
    .wrap {
      background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
      background-size: 6.3291139241%;
      background-origin: content-box;
      background-clip: content-box;
      background-position: left top; }
      .wrap .wrapper {
        width: 5118.75em; } }

Looks like the compiler somehow assumes I will use 'em's. Why this happens though, I don't know.

If I replace 'px' with 'em' though, the same error is thrown.

EDIT 2:

The mixin:

@include susy-breakpoint(500px) { }

has exactly the same issue.

EDIT 3:

I uninstalled Breakpoint, susy-breakpoint seems to be working ok. Using Breakpoint in isolation does NOT work as Susy does, though.

Idefixx
  • 472
  • 5
  • 21
  • Show the compiled results without the unit. – cimmanon May 05 '15 at 11:29
  • Added the compiled .css. – Idefixx May 05 '15 at 11:34
  • 1
    Well no wonder why your media queries don't appear to work, it's practically impossible to reach that breakpoint (5121.25em is ~81947px at the default font-size of 16px). I don't have time to figure out the why, but the answer is in the source of the breakpoint mixin you're using. – cimmanon May 05 '15 at 11:46

0 Answers0