Добавяне на псевдокласове със 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

където 'anchor' е миксин, който създава селектора. Въпреки това моите опити за двата подхода не бяха наистина успешни. Най-доброто, което можах да измисля, беше:

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

В интерес на отговора на въпроса, не се нуждаете от mixin тук, тъй като те генерират атрибути. Имате нужда от функция, която ще върне манипулиран низ, който след това може да бъде интерполиран по-късно:

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