Различия между нативным CSS и вложенностью Sass

С момента своего запуска CSS упорно отказывался поддерживать синтаксис вложенных селекторов. Альтернативой всегда было использование препроцессора CSS, такого как Sass. Но сегодня вложенность официально является частью встроенного CSS. Вы можете опробовать эту функцию прямо в современных браузерах.

Если вы переходите с Sass, вам необходимо принять во внимание любые различия между собственной вложенностью и вложенностью Sass. Между обеими функциями вложения есть некоторые ключевые различия, и знание о них имеет решающее значение, если вы делаете переход.

Вам нужно использовать «&» с селекторами элементов в нативном CSS

CSS Nesting все еще является черновой спецификацией с различной поддержкой браузеров. Обязательно проверьте такие сайты, как caniuse.com для получения актуальной информации.

Вот пример типа вложенности, который вы можете увидеть в Sass, используя синтаксис SCSS:

.nav {
ul { display: flex; }
a { color: black; }
}

Этот блок CSS указывает, что любой неупорядоченный список внутри элемента с навигация класс выравнивается как гибкий столбец, один из способов размещение HTML-элементов на странице. Кроме того, весь текст якорной ссылки внутри элементов с навигация класс должен быть черным.

В нативном CSS такое вложение было бы недопустимо. Чтобы это работало, вам нужно будет включить символ амперсанда (&) перед вложенными элементами, например:

.nav {
 & ul { display: flex; }
 & a { color: black; }
}

Ранняя версия вложенности CSS не позволяла вкладывать селекторы типов. Недавнее изменение означает, что вам больше не нужно использовать «&», но старые версии Chrome и Safari могут еще не поддерживать этот обновленный синтаксис.

Теперь, если вы использовали селектор, который начинается с символа (например, селектор класса), чтобы ориентируйтесь на определенную часть страницы, вы можете опустить амперсанд. Таким образом, следующий синтаксис будет работать как в собственном CSS, так и в Sass:

.nav {
.nav-list { display: flex; }
.nav-link { color: black; }
}

Вы не можете создать новый селектор, используя «&» в собственном CSS

Одна из особенностей Sass, которая вам, вероятно, нравится, — это возможность делать что-то вроде этого:

.nav {
 &-list { display: flex; }
 &-link { color: black; }
}

Этот код Sass компилируется в следующий необработанный CSS:

.nav-list {
display: flex;
}
.nav-link {
color: black;
}

В собственном CSS вы не можете создать новый селектор с помощью «&». Компилятор Sass заменяет «&» родительским элементом (например, .nav), но собственный CSS будет рассматривать «&» и часть после него как два отдельных селектора. В результате он попытается создать составной селектор, который не даст того же результата.

Однако этот пример будет работать в собственном CSS:

.nav {
 &.nav-list { display: flex; }
 &.nav-link { color: black; }
}

Это работает, потому что первый селектор такой же, как nav.nav-список в простом CSS, а второй такой же, как nav.nav-ссылка. Добавление пробела между «&» и селектором будет эквивалентно написанию nav .nav-список.

В собственном CSS, если вы используете амперсанд следующим образом:

.nav {
 &__nav-list { display: flex; }
 &__nav-link { color: black; }
}

Это то же самое, что написать это:

__nav-list.nav {
display: flex;
}
__nav-link.nav {
color: black;
}

Это может вас удивить, учитывая, что оба __nav-список и __nav-ссылка находятся внутри .nav селектор. Но амперсанд фактически помещает вложенные элементы перед родительским элементом.

Специфика может быть разной

Еще одна вещь, на которую следует обратить внимание, — это влияние на специфичность, которого нет в Sass, но происходит при встроенной вложенности CSS.

Итак, скажем, у вас есть и элемент. С помощью следующего CSS в любом из этих элементов будет использоваться шрифт с засечками:

#main, article {
h2 {
font-family: serif;
 }
}

Скомпилированная версия приведенного выше кода Sass выглядит следующим образом:

#mainh2,
articleh2 {
font-family: serif;
}

Но тот же синтаксис вложения в собственном CSS даст другой результат, фактически такой же, как:

:is(#main, article) h2 {
font-family: serif;
}

является() Селектор обрабатывает правила специфичности немного иначе, чем вложенность Sass. В основном специфика:является() автоматически обновляется до наиболее конкретного элемента в списке предоставленных аргументов.

Порядок элементов может изменить выбранный элемент

Вложение в собственный CSS может полностью изменить то, что на самом деле означает селектор (т. е. выбирает совершенно другой элемент).

Рассмотрим, например, следующий HTML:

<divclass="dark-theme">
 <divclass="call-to-action">
 <divclass="heading"> Hellodiv>
div>
div>

И следующий CSS:

body { font-size: 5rem; }
.call-to-action.heading {
.dark-theme & {
padding: 0.25rem;
background: hsl(42, 72%, 61%);
color: #111;
 }
}

Вот результат, если вы используете Sass в качестве компилятора CSS:

Теперь в блоке HTML, если вы переместите с классом темная тема внутри этого призыв к действию, это сломает селектор (в режиме Sass). Но когда вы переключитесь на обычный CSS (т. е. без препроцессора CSS), стили продолжат работать.

Это происходит из-за того, что :является() работает под капотом. Таким образом, приведенный выше вложенный CSS компилируется в следующий простой CSS:

.dark-theme:is(.call-to-action.heading) {
/* CSS code */
}

Это указание .заголовок это потомок обоих .dark-тема и .призыв к действию. Но порядок их не имеет особого значения. Пока .заголовок является потомком .призыв к действию и .dark-тема, это работает в любом порядке.

Это крайний случай, с которым вы столкнетесь не так часто. Но понимание :является() Базовая функциональность селектора поможет вам освоить работу вложения в CSS. Это также делает отладка вашего CSS намного легче.

Узнайте, как использовать Sass в React

Поскольку Sass компилируется в CSS, вы можете использовать его практически с любой платформой пользовательского интерфейса. Вы можете установить препроцессор CSS в проекты Vue, Preact, Svelte и, конечно же, React. Процесс установки Sass для всех этих фреймворков также довольно прост.

Самым большим преимуществом использования Sass в React является то, что он позволяет писать чистые, повторно используемые стили, используя переменные и примеси. Знание того, как использовать Sass, как разработчик React, поможет вам писать более чистый и эффективный код и сделает вас лучшим разработчиком в целом.