theobroma
@theobroma
javascript developer (ReactJS)

Как решить проблему наследования псевдо-классов в Stylus?

Есть код на Stylus для оформление центрированного заголовка с линиями по сторонам
.line-title
	position relative
	z-index 1
	overflow hidden
	text-align center
	&:before
		right 20px
		margin 0 0 0 -100%
	&:after
		left 20px
		margin 0 -100% 0 0

.line-title:before,
.line-title:after
	content ''
	display inline-block
	width 100%
	height 1px
	background #404040
	z-index -1
	position relative
	vertical-align middle

Я хотел унаследовать все стили, включая стили псевдо-классов, одним махом так сказать. А пришлось городить вот это
.recall
	&__title
		@extend .line-title
		&:before
			@extend .line-title:before
		&:after
			@extend .line-title:after

Чувствую, должно быть рашение получше и я что-то пропустил. Что скажите?
  • Вопрос задан
  • 2791 просмотр
Решения вопроса 1
theobroma
@theobroma Автор вопроса
javascript developer (ReactJS)
Вопрос решился тем, что когда вставил эту часть кода
content ''
	display inline-block
	width 100%
	height 1px
	background #404040
	z-index -1
	position relative
	vertical-align middle
через нестинг напрямую в .line-title и в &:before, и в &:after, то все заработало через "одиночный" @extend.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Попробуйте организовать ваш код по-другому.
//Extend classes
.headlings-line
  position relative
  z-index 1
  overflow hidden
  text-align center
  &:before
    right 20px
    margin 0 0 0 -100%
  &:after
    left 20px
    margin 0 -100% 0 0
//Project code
.line-title,  .recall
  @extend .headlings-line
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы