Продление В Sass без создания шутите

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

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

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

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

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

  • Цель “ простой selector 2 отождествляется;
  • | __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 .Это очень универсальные селекторы в том, что они:

  • Можно extended, конечно,
  • Игнорируются в CSS output, которые могут предотвратить ненужную выход;
  • Может быть динамически declared как и любой другой селектор в Sass, означает, что вы можете %do-#{$this}, который дает ему ногу на нединамических Mixins .

При @extend %placeholders, взрывчатые побочные эффекты уменьшились, потому что у вас есть один меньше разделяемую селектор объединить на заключительном выходе CSS .

Расширение Selector, как несколько раз, как это возможно .

Рассмотрим следующий пример | inheritance__0 расширяя родительский (заполнитель) Переключатель:

// 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 { /* … */ }

При удлинении же селектор несколько раз, спросите себя, Что все эти выступающие селекторы имеют в общем?Затем, вы можете предел, как часто селектора extended рефакторинга, используя общий selector, такие, как .button.primary, а .button-primary, так что только расширение .button { @extend %button; } .

Продлить Черты Выборочно, и Рассмотрим Mixins для коротких Черты .

Предыдущая стратегия может быть трудно достичь с traits, который по определению может быть общим для многих селекторов, которые в противном случае не связаны.Черты,в общем, не иерархическую constraints;то есть, они (обычно) являются независимым от взаимосвязи между селектором, используя его и другие селекторы.Таким образом, они может быть использован с @extend или @mixin .

Я бы (лично) выбрать @extend черта со многими правилами.Выводится CSS воля группа не связанных с селекторы признака ruleset, хотя это не огромная проблема — обслуживание стилей происходит в .sass 68 ~ или | файлы, а не ваш .css файлы, и естьНесколько эффективности компромиссы, в общем .

С другой стороны, я хотел бы использовать @mixin для наборов правил, которые лаконично и часто используется, например, clearfix.Продление его вызовет CSS для вывода большого количества селекторов для этого небольшого признака.Использование его в качестве примесь сделает выводится CSS гораздо более читабельным, и повторение в порядке, потому набор правил мало .

Итак, вот некоторые общие принципы использования черты:

  • Продлить черты, которые давно наборы правил или редко используемые .Это держит ваш выведенный CSS сухой и помогает группировать наборы правил в CSS для повышения ясности в отладке браузера .
  • Подмешать черты, которые являются более обобщенным, короткие и часто используется .Вы можете @extend эти типы черт, но вы более подвержены риску взрыва селектора .
  • Стик повторяется наборов правил в %placeholder признака или @mixin .Это просто общая хорошая практика, чтобы сохранить ваш СКС как можно более сухой .

Использование @extend для отношений .

Это один из самых важных применений @extend.Отношения между селекторов в ваших стилей можно получить довольно сложным, и @extend это идеальный инструмент для — вы не можете выразить отношения с @mixin одиночку . Отношения между селекторов выражается с combinator 4 , такие, как >, +, ~ или белого пространства предка комбинатора.Много различных типов отношений может существовать в CSS, даже не так очевидные:

Comments are closed.