6. invalid syntax on line 8 of main.scss

I got the same issue, blitzing my way through to a roadblock, error i get despite trying a few fixes with what i have learnt but nothing;

Error: invalid syntax on line 8 of main.scss >> $stripe-properties:to bottom, 15%, blue, white;

my code;

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
  background: $repeating-linear-gradient(
    $stripe-background ($width-percent - 1),
    $stripe-color 1%,
    $stripe-background $width-percent
    $stripe-properties:to bottom, 15%, blue, white;
@mixin transform($transformation) {
  transform: $transformation;
  -webkit-transform: $transformation;
  -moz-transform: $transformation;
  -ms-transform: $transformation;
  -o-transform: $transformation;  

@mixin photo-content {
  object-fit: cover;

@mixin backface-visibility($visibility: hidden) {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;

@mixin transform-style($style) {
  transform-style: $style;
  -moz-transform-style: $style;
  -o-transform-style: $style;
  -ms-transform-style: $style;
  -webkit-transform-style: $style;

@mixin transition($time) {
  transition: $time;
  -webkit-transition: $time;
  -moz-transition: $time;
  -o-transition: $time;

.notecard { &:hover {
  @include transform(rotatey(-180deg));
  @include transform-style(preserve-3d);
  @include transition(0.4s);
  width: 300px;
  height: 180px;
  border: 1px solid black;
  display: inline-block;
  margin: 20px;
  font-family: Roboto, sans-serif;
  box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
  .front, .back {
    width: 100%;
    height: 100%;
    position: absolute;
    @include backface-visibility(hidden);
  .front {
  z-index: 3;
  font-size: 20px;

    .word {
      display: block;
      text-align: center;
      position: relative;
      top: 40%;
  .back {
  z-index: 1;
  word-wrap: break-word;
  line-height: 1.6;
    @include transform(rotatey(-180deg));
    .definition {
      width: 100%;
      height: 100%;
      @include stripes($stripe-properties...);
      .photo {
        width: 60%;
        margin: 0px auto;

It looks like you’ve put your new list variable inside of your stripes mixin. Instead of doing that, the exercise is asking you to:

At the top of main.scss, make a new list variable:

$stripe-properties: to bottom, 15%, blue, white;

Hi i have the same problem as @spartanz.
@albionsrefuge your comments is useless. The exercise request is not at all clear, or at least i dont know what else to do.
i created a single a new line
$stripe-properties: to bottom, 15%, blue, white;
and got it wrong.
i did the same thing as @spartanz
@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) { background: $repeating-linear-gradient( $direction, $stripe-background, $stripe-background ($width-percent - 1), $stripe-color 1%, $stripe-background $width-percent $stripe-properties:to bottom, 15%, blue, white; ); }
and got it wrong too.

I still dont get it

Still no success after attempting the solution albion suggested, thanks though.

After you moved your line 8 to line 1, did your error message change?

I think it will. It should now be complaining about $repeating-linear-gradient. You’ve put a $ on that, but it isn’t a variable, it is a CSS function.

Let me know what happens after you fix those.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.