Вивчаємо sass. Розширення батьківського селектора.

Всім привіт! У цій статті ми розглянемо, як зробити прив`язку до батьківського селектору в Sass.

Буває, що вам потрібно розширити селектор, не створюючи нового правила. Щоб це зробити, ви можете прив`язати до готового селектору додаткові селектори, використовуючи знак амперсанда ().

Зовні це виглядає, як створення дочірнього селектора в ієрархії, але з використанням амперсанда ми розширюємо саме батьківський селектор, а не створюємо дочірній. Щоб стало зрозуміліше, давайте розглянемо приклад.

a 
 font-weight: bold 
 text-decoration: none 
 
:hover 
 text-decoration: underline

У скомпільованому вигляді це буде виглядати наступним чином:

a { 
 font-weight: bold- 
 text-decoration: none- 
} 
 
a:hover { 
 text-decoration: underline- 
}

Дуже часто ви можете зустріти наступний тип написання назви для класів в HTML: Спочатку пишуть головний клас, а потім його розширюють, поставивши тире, і пишуть новий клас для дочірнього елемента. Наприклад, у нас є якийсь головний блок, і ми дамо йому ідентифікатор main. Усередині нього знаходиться блок з бічної панелькой, і ми назвемо його main-sidebar. Отже, як же нам тепер звернутися до цього блоку, використовуючи Sass? Щоб кожен раз не писати main, ми можемо використовувати замість нього знак амперсанда.

#main 
 color: black 
 
-sidebar 
 border:1px solid

Отже, на цьому сьогодні все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі