Коли ви тільки починаєте використовувати Sass, перше, з чим ви стикаєтеся - це вкладеність (nesting). Одна з причин, по якій ми використовуємо препроцесори, полягає в тому, що вони допомагають скоротити кількість коду. Зокрема, вкладеність дозволяє використовувати скорочення при написанні правил. Однак проблема всіх відмінних інструментів в тому, що ними легко зловжити. Зайве використання вкладеності призводить до складних, які піддаються супроводу стилям.
Що таке вкладеність
Вкладеність дозволяє записувати селектори, що імітують структуру HTML. Це дає можливість використовувати скорочення при написанні стилів. наприклад:
Це найпростіший приклад вкладеності, елемент div містить елемент p. Скомпільований результат:
Елементу div ми можемо поставити власні властивості:
Цей приклад скомпілюється в два різних правила, одне для елемента div, інше - для p.
Як використовувати вкладеність
Використовувати вкладені стилі досить просто: потрібно всього лише записати селектор (або селектори) між фігурними дужками іншого селектора.
Вкладеність може мати стільки рівнів, скільки ви захочете. Це означає, що ви можете вкласти елемент всередину іншого елемента, який сам міститься всередині третього елемента.
Обмеження на рівень вкладеності дійсно немає. Але якщо щось можна зробити, це не означає, що це потрібно робити. Доброю практикою вважається збереження не більше трьох рівнів вкладеності. Більше число рівнів впливає на читаність коду. Sass покликаний допомогти нам писати CSS швидше, а не перетворити його в купу підтримуються стилів. наприклад:
П'ять рівнів вкладеності виглядають цілком безневинно. Погляньте на скомпільований CSS, щоб краще зрозуміти проблему:
Уявіть, що ми змінимо структуру сторінки, наприклад, поміняємо .content на .article. Всі вкладені стилі повинні бути переписані, оскільки всі вони залежать від .content.
Якщо ми захочемо використовувати стилі для .text де-небудь ще на сайті, ми не зможемо, тому що правила для .text залежать від елементів, які його оточують.
Посилання на родітескій селектор
У страшному прикладі вище ми використовували , Який повинен заміщатися на батьківський селектор. Символ. використовувався для створення псевдо-класів для посилань.
Само по собі це легко читається і цілком підтримувані. символ також можна використовувати для створення складних селекторів, додавши в нього закінчення. наприклад:
вкладеність властивостей
Sass також дозволяє використовувати скорочення для властивостей. Зазвичай для визначення властивостей з одного простору імен, наприклад border, ми повинні кожне властивість записувати окремо. У Sass ми можемо поставити простір імен, а всередині перерахувати властивості.
В результаті простір імен додалося до кожного властивості. На відміну від вкладених селекторів для вкладених властивостей не потрібно використовувати , Щоб підставити значення простору імен.
висновок
Тепер, коли ви познайомилися з вкладеністю, будь ласка, використовуйте її відповідально. Дуже просто за допомогою вкладеності перетворити стилі в нічний кошмар читання. Де і як використовувати вкладеність залежить від вас, якщо ви вирішите використовувати 8 рівнів вкладеності, будь ласка. Але будьте готові до довгих нічним годинах роботи при рефакторінгу проекту.
Знайшли друкарську помилку? Orphus: Ctrl + Enter