SCSS Mixin добавя :: преди стилизиране

@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 създава следното в 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 */
  }

Поради естеството на това как работят миксините, той добавя интервал между item и ::before, което кара тези да не се свързват един с друг по очаквания начин. Когато това пространство се премахне, елементът се държи според очакванията.

Как бих могъл да използвам същия или подобен метод, за да постигна следния резултат?

.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 */
  }

Ако не можете да разберете каква е разликата, item ::before сега е item::before и така нататък...


css sass mixins
person b2550    schedule 03.07.2015    source източник
comment
О, човече @Nit, просто е малко късно за отговор. Веднага след Ориол.   -  person b2550    schedule 04.07.2015
comment
Това е дубликат, но не можах да намеря този въпрос поради заглавието му, а въпросът и отговорът не са толкова ясни. Обикновено колкото по-къс е, толкова по-добре.   -  person b2550    schedule 04.07.2015

Отговори (2)


arrow_upward
1
arrow_downward

Използвайте &:

Позоваване на родителски селектори: &

Понякога е полезно да използвате родителския селектор на вложено правило по начини, различни от стандартния. [...] В тези случаи можете изрично да посочите къде трябва да бъде вмъкнат родителският селектор, като използвате знака &.

@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 */
  }
}
person Oriol    schedule 03.07.2015

arrow_upward
1
arrow_downward

Търсите амперсанда:

@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;
}
person Etheryte    schedule 03.07.2015