Skip to content
Арсений edited this page Mar 27, 2019 · 2 revisions

«Призрачные» вспомогательные классы

Призрачные классы используются для того, чтобы повторятся множество раз и при этом не засорять эфиркод. Технология прямиком из SASS. Чтобы их использовать, необходимо заэксендить в нужный класс, id, тег. Тогда на выходе внутри него будут свойства прописанные в призраке, но самого призрака вы в коде не найдете.

%none-select
	-moz-user-select : -moz-none
	-o-user-select : none
	-khtml-user-select : none
	-webkit-user-select : none
	user-select : none

.text__noselect
	@extend %none-select

Таким образом вы получите класс .text__noselect, который можно применять к тегам. Более практичным использованием будет, к пример применение его к классу кнопки, созданной из тега <a>...</a>. По умолчанию это текст. А текст можно выделить мышкой и скопировать. Чтобы избежать путаницы для пользователя наши кнопки снабжены свойствами этого призрака.

Перечень призраков

%row

Для формирования строки внутри .g-container. Используется для .g-row.

%none-select

На данный момент это единственный призрак, который мы создали.

%link

Необходим для оформления стандартной ссылки, у которой есть форм-фактор «посещено». Используется в проекте в нескольких блоках и для оформления ссылок внутри <article> или .article.

%disabled

Отключает события мыши и изменяет курсор на not-allowed.