thoughtbot/refills

Comma missing in sliding panel scss on refills component tutorial

trueb2 opened this issue · 1 comments

When trying to use the sliding panel scss code
I get the error

/path/to/sass/compiler/sass_compiler-input_base_path-0HP4aifp.tmp/app/styles/bourbon/bourbon/library/_size.scss, line 41

The Broccoli Plugin: [SassCompiler] failed with:
Error: `220px 100%` is not a valid length for the `$height` argument in the `size` mixin.

While trying to find the source of the issue, I made sure that I was using the following

  • Bourbon 5.0.0.beta.7
  • Neat 1.8.0
  • Bitters 1.5.0
  • Sass 3.4.23 (Selective Steve)

The code for scss looks like

...
  $sliding-panel-color-hover: #fff;
  $sliding-panel-background-focus: lighten($sliding-panel-background, 5%);

  @include position(fixed, 0 auto 0 0);
  @include size(220px 100%);
  background: $sliding-panel-background;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateX(-220px);
  transition: all 0.25s linear;
  z-index: 999999;

  ul {
    padding: 0;
    margin: 0;
  }
...

I suggest the addition of a comma, which fixed my problem

@include size(220px ,100%);

This has been fixed.