Добавьте псевдоклассы с препроцессором Stylus CSS

Я новичок в препроцессоре Stylus CSS, но то, что я видел до сих пор, мне очень нравится. Во всяком случае, у меня есть следующий css:

$link
    color #777
    display block

...
a.className, a.className:hover, a.className:visited
    @extends $link

$link используется и в других местах. Это прекрасно работает. Однако я уверен, что должен быть какой-то способ избежать повторного ввода a.className в строке: 'a.className, a.className:hover, a.className:visited'. То есть то, что я хотел бы сделать, это что-то вроде:

a.className, &:hover, &:visited
    @extends $link

ИЛИ, скажем

anchor(className)
    @extends $link

где «якорь» — это миксин, создающий селектор. Однако мои попытки использовать любой подход не увенчались успехом. Лучшее, что я смог придумать, это:

a.className
    &:link
    &:hover
    &:visited
        @extends $link

Хотя это работает, я не уверен, что это яснее, чем оригинал. Любое руководство/помощь высоко ценится!


css stylus mixins
person fhevol    schedule 13.04.2015    source источник
comment
Зачем вообще нужно писать их все? Я считаю, что a.className достаточно.   -  person Itay    schedule 13.04.2015
comment
Ну, теперь я просто чувствую себя совершенно глупо. Я не могу вспомнить, почему я указал :hover/:visited. Он работает именно так, как вы предложили.   -  person fhevol    schedule 14.04.2015

Ответы (1)


arrow_upward
2
arrow_downward

В интересах ответа на вопрос вам здесь не нужен миксин, поскольку он генерирует атрибуты. Вам нужна функция, которая вернет обработанную строку, которую затем можно будет интерполировать позже:

mono-link(className)
  states = 'link', 'hover', 'visited'
  parent = 'a.' + className
  retList = (parent)
  for state in states
    push(retList, parent + ':' + state)
  return join(',', retList)

$link
  color #777
  display block

{mono-link(someclass)}
  @extend $link

урожаи

a.someclass,
a.someclass:link,
a.someclass:hover,
a.someclass:visited {
  color: #777;
  display: block;
}

Тем не менее, это не тот CSS, который вам следует писать, особенно часть display: block, поскольку она будет унаследована от селектора a.someclass.

person dinocarl    schedule 14.04.2015