哪个选择器在 Stylus 规则集中匹配?
Which Selector Matched in a Stylus Rule Set?
有没有办法获取手写笔规则集中匹配的 class 的名称?
我想做的是完善这条规则(很多人都喜欢):
.button
&:hover
button-hover-color-scheme(teal)
&.adwords
button-hover-color-scheme(adwords)
&.bingads
button-hover-color-scheme(bingads)
&.facebook
button-hover-color-scheme(facebook)
&.linkedin
button-hover-color-scheme(linkedin)
&.twitter
button-hover-color-scheme(twitter)
我想让它看起来像这样:
.button
&:hover
button-hover-color-scheme(teal)
&.adwords
&.bingads
&.facebook
&.linkedin
&.twitter
button-hover-color-scheme(matched-selector)
其中 matched-selector
是 adwords, bingads, facebook, linkedin, or twitter
中实际匹配规则的那个。
谢谢!
编辑:
有 selector() 函数,但它为我提供了整个选择器,而不仅仅是要匹配的最后一块。这几乎是我所需要的,但我觉得必须有一种更简单的方法来引用匹配的选择器。
您无法获取匹配的选择器,因为该选择器只会在浏览器运行时定义。那时不会有任何 Stylus 代码,因为浏览器将使用由 Stylus 编译的 CSS。
多亏了 Panya 的回答,我开始尝试使用插值来解决这个问题并想出了:
.button
&:hover
for network in 'google' 'bing' 'facebook' 'linkedin' 'twitter'
&.{network}
button-hover-color-scheme(lookup(network))
诀窍是遍历字符串列表,使用方括号作为选择器并查找以将字符串转换回变量。
有没有办法获取手写笔规则集中匹配的 class 的名称?
我想做的是完善这条规则(很多人都喜欢):
.button
&:hover
button-hover-color-scheme(teal)
&.adwords
button-hover-color-scheme(adwords)
&.bingads
button-hover-color-scheme(bingads)
&.facebook
button-hover-color-scheme(facebook)
&.linkedin
button-hover-color-scheme(linkedin)
&.twitter
button-hover-color-scheme(twitter)
我想让它看起来像这样:
.button
&:hover
button-hover-color-scheme(teal)
&.adwords
&.bingads
&.facebook
&.linkedin
&.twitter
button-hover-color-scheme(matched-selector)
其中 matched-selector
是 adwords, bingads, facebook, linkedin, or twitter
中实际匹配规则的那个。
谢谢!
编辑:
有 selector() 函数,但它为我提供了整个选择器,而不仅仅是要匹配的最后一块。这几乎是我所需要的,但我觉得必须有一种更简单的方法来引用匹配的选择器。
您无法获取匹配的选择器,因为该选择器只会在浏览器运行时定义。那时不会有任何 Stylus 代码,因为浏览器将使用由 Stylus 编译的 CSS。
多亏了 Panya 的回答,我开始尝试使用插值来解决这个问题并想出了:
.button
&:hover
for network in 'google' 'bing' 'facebook' 'linkedin' 'twitter'
&.{network}
button-hover-color-scheme(lookup(network))
诀窍是遍历字符串列表,使用方括号作为选择器并查找以将字符串转换回变量。