Did you include the $stripes mixin and pass in a list defining the arguments

Hi there

I am stuck on this step too and get the same error. I honestly have no idea what I could be doing wrong. Please can you help me troubleshoot or give me a tip. What I have in my main.scss makes logical sense so I don’t know why it isn’t working.


The link, as invaluable as it is, points to our own work, not yours. We cannot see the code in your exercise. Please post it. Thank you.

Looking at the lesson, be sure .definition is nested in .back and .photo is nested in .definition.

2 posts were split to a new topic: $stripes mixin problem

Were you perhaps working in Firefox? Switching to Google Chrome worked for me.

Hi there

Thanks, I noticed that .photo wasn’t nested in .definition so I have corrected that but I am still encountering the error when I try and Run.

Below, my code:

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

@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,

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

@mixin transform-style($style){
transform-style: $style;
-moz-transform-style: $style;
-o-transform-style: $style;
-ms-transform-style: $style;
-webkit-transform-style: $style;
@mixin backface-visibility($visibility: hidden) { //add an argument
backface-visibility: $visibility;
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
-ms-backface-visibility: $visibility;
-o-backface-visibility: $visibility;

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

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

.notecard {
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);
@include transform-style(preserve-3d);
@include transition(0.4s);
@include transform (rotatey(-180deg));


.front, .back {
width: 100%;
height: 100%;
position: absolute;
@include backface-visibility;

.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;



I found the problem. One tiny little stray comma.

Thank you for your help!

1 Like