用Sass将父选择器追加到末尾 [英] Append the parent selector to the end with Sass
本文介绍了用Sass将父选择器追加到末尾的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
好的,假设我有以下传统CSS
.social-media { /* ... */ }
.social-media .twitter { /* ... */ }
.social-media .facebook { /* ... */ }
ul.social-media { /* ... */ }
因此,我尝试使用SCSS这样做:
.social-media {
/* ... */
.twitter {
/* ... */
}
.facebook {
/* ... */
}
// Here's the problem:
ul& {
/* ... */
}
}
最后一部分不起作用,因为它似乎应该只出现在选择器的开头。是否有解决办法?
推荐答案
SASS3.2及更早版本
您唯一可以做的就是反转嵌套,或者根本不嵌套: .社交媒体{ /* ... */
.twitter {
/* ... */
}
.facebook {
/* ... */
}
}
ul.social-media {
/* ... */
}
Sass 3.3及更高版本
可以使用插值和@at-root
指令:
.social-media {
/* ... */
// Here's the solution:
@at-root ul#{&} {
/* ... */
}
}
但是,如果您的父选择器包含多个选择器,则需要改用selector-append
:
.social-media, .doodads {
/* ... */
// Here's the solution:
@at-root #{selector-append(ul, &)} {
/* ... */
}
}
输出:
.social-media, .doodads {
/* ... */
}
ul.social-media, ul.doodads {
/* ... */
}
这篇关于用Sass将父选择器追加到末尾的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文