@extend директива Sass является мощным директива, которая облегчает обмен правил и отношений между селекторов.Тем не менее, это может вызвать нежелательные побочные эффекты, если он не тщательно реализованы.К счастью, существует множество стратегий для использования @extend эффективно, что может предотвратить эти побочные эффекты и производить чистый, организованный CSS .

Изучая @extend подробно и исследовать эти различные стратегии, вы можете:

• Точно предсказать точно что происходит, когда вы используете @extend
• И принимать более обоснованные решения о том, когда использовать @mixin и когда использовать @extend, чтобы обеспечить оптимальную организацию и ограничить неиспользуемые стили в ваших стилей .

Что происходит, когда вы используете @extend

Сасс “@extend directive ¹ делает гораздо больше, чем группа продлен селекторы вместе, а документация предполагает.Две основные вещи происходят, когда вы @extend селектор:

• Цель “ простой selector ² ” отождествляется;
• | __6 Ограничения formed на целевой селектора с помощью:
  • Селектор, который делает расширение
  • И селектор, который расширяется .

Давайте разберем это вниз с примера.Рассмотрим следующий код:

.foo.bar { color: green; }

.ancestor .descendant { @extend .bar; } // .bar is being extended

• Цель просто селектор определены как .descendant .
• Два ограничения формируются:
  • .bar (и все, что расширяет его) должны иметь класс .foo быть зеленым,
  • .descendant должно быть потомком .ancestor .

Используя эту информацию, @extend директива производит этот набор правил:

.foo.bar, .ancestor .foo.descendant { color: green; }

Селектор целей .descendant Сейчас отвечает требованиям ограничений: Это имеет класс .foo, и это предок .ancestor .

Некоторые общие @extend сценарии перечислены ниже.Обратите внимание на ограничения (требования) неявно, размещенные на целевой селектора и как эти ограничения выполнены в выводимого CSS:

// Extending a selector with an ancestor
.first { color: green; }
.second { @extend .first; }
.ancestor .first { background: white; }

// CSS
.first, .second { color: green; }
.ancestor .first, .ancestor .second { background: white; }

// Extending a selector with a descendant
.first .descendant { color: green; }
.second { @extend .first; }

// CSS
.first .descendant, .second .descendant { color: green; }


// Extending a selector within a compound selector
.one.two { color: green; }
.three { @extend .one; }

// CSS
.one.two, .two.three { color: green; } 


// Extending a selector using a complex selector
.foo.bar { color: green; }
.complex .selector { @extend .bar; }

// CSS
.foo.bar, .complex .foo.selector { color: green; }

// Alternating ancestors
.ancestor-1 .foo { color: green; }
.ancestor-2 .bar { @extend .foo; }

// CSS
// Notice how the ancestors switch places to 
// maintain the general ancestral constraints
.ancestor-1 .foo,
.ancestor-1 .ancestor-2 .bar,
.ancestor-2 .ancestor-1 .bar {
  color: green;
}

// Combinator with common ancestor
.foo.bar + .sibling { color: green; }
.foo .descendant { @extend .sibling; }

// CSS
// Notice how .foo is repeated to preserve
// constraint of .foo.bar
.foo.bar + .sibling,
.foo .foo.bar + .descendant {
  color: green;
}

Есть несколько вынос из приведенных выше примеров:

• Продление подчиняется ограничениям селектор .В последнем примере, .descendant это родной брат .foo.bar, не .foo.Это также потомок .foo, и поскольку .foo не может быть и предок и брат, то он выводится в два раза, чтобы сохранить эти соответствующие ограничения .
• Предки и потомки селекторы склонны к перестановке прогремит взрыв .Предки (в виде .ancestor .descendant) может быть что угодно от родителей к бабушке и дедушке и за его пределами.Когда селекторы с предками расширять другие селекторы с предками, все эти перестановки должны быть учтены .
• Продление естьодносторонняя операция .При .bar расширяет .foo, .bar тесно осведомлены о взаимоотношениях между .foo и его селекторы, но не наоборот.И да, селекторы могут взаимно @extend друг друга .

Зачем использовать @extend

@extend и @mixin директивы не то же самое.Принимая во внимание, @mixin выводит правила, которые могут быть скопированы для нескольких селекторов и с помощью различных параметров, @extend использует механизм, описанный выше, для правила обмена, что позволяет ему служить три основные цели:

• Inheritance из наборов правил между селекторов, которые могут быть переопределены в проходящей селектора;
• Traits или разделяемые наборы правил;
• Relationships между селекторов, которые поддерживаются при селектора с определенной взаимосвязи расширен с помощью комбинаторах (например, >, +, ~, и т.д..) .

Стратегии и руководящие принципы для @extend

Теперь, когда мы знаем, как использовать @extend и то, что именно вызывает взрыв селектора, давайте посмотрим на некоторые стратегии, которые мы можем реализовать правильно разделить стили через селекторы .

Использование и расширение %placeholder селекторы .

Сасс включает особый тип селектора называется селектор заполнителя, который в буквальном смысле предназначены для использования с @extend | __29 __30 | | 3__29 .Это очень универсальные селекторы в том, что они:

// Don't do this:

%button {
  // … parent button styles
}

.button {
  @extend %button;
  // … button styles
}

.button-primary {
  @extend %button;
  // … primary button styles
}

.button-secondary {
  @extend %button;
  // … secondary button styles
}

// CSS - we want to avoid this:
.button, .button-primary, .button-secondary {
  // button styles
}

.button-primary { /* … */ }
.button-secondary { /* … */ }