SCSS Mixin append ::before styling

Question

@mixin item {
  /* Element Styling */
  ::before {
    /* Element ::Before Styling */
  }
  :hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}

.item {
  @include item;
}

This SCSS example produces the following in CSS

.item {
   /* Element Styling */
 }
  item ::before {
    /* Element ::Before Styling */
  }
  item :hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }

Because of the nature of how mixins work, it adds a space between item and ::before which causes those to not be associated with each other in the manner that is expected. When this space is removed the element behaves as expected.

How would I go about using the same or similar method to achive the following output?

.item {
   /* Element Styling */
 }
  item::before {
    /* Element ::Before Styling */
  }
  item:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }

If you can't tell what the difference is, item ::before is now item::before and so on...

Oh man @Nit, Just a bit too late to answer. Right after Oriol. — b2550, Jul 03 '15 at 23:08
This is a duplicate but I could not find that question due to its title and the question and answer are not as strait forward. Normally the shorter the better as well. — b2550, Jul 04 '15 at 01:24

score 1 · Accepted Answer · answered Jul 03 '15 at 23:06

Use the &:

Referencing Parent Selectors: &

Sometimes it’s useful to use a nested rule’s parent selector in other ways than the default. [...] In these cases, you can explicitly specify where the parent selector should be inserted using the & character.

@mixin item {
  /* Element Styling */
  &::before {
    /* Element ::Before Styling */
  }
  &:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}

score 1 · Answer 2 · answered Jul 03 '15 at 23:06

You're looking for the ampersand:

@mixin item {
  /* Element Styling */
  &::before {
    /* Element ::Before Styling */
  }
  &:hover::before {
    /* Hover animation to be performed by the before when the main element is in a hover state */
  }
}

.item {
  @include item;
}

SCSS Mixin append ::before styling

2 Answers2