IT干货网

sass之不是最后一个 child mixin SASS

unruledboy 2026年07月31日 编程设计 111 0

是否有可能将其转为:

.redstripe p:not(last-child) { 
  border-bottom:1px solid red; 
} 

放入mixin中,这样我就可以将其应用于任何元素,并为其分配一个子标签,如下所示:
@mixin redstripe (this.$children):not(last-child) { 
  border-bottom:1px solid red; 
} 

然后申请:
div { 
  @include redstripe(p); 
} 

实现此方法的正确方法是什么?

请您参考如下方法:

这是您所描述的通用目的混合。

DEMO

@mixin not-last-child($selector) { 
  & #{$selector}:not(:last-child) { 
    @content; 
  } 
} 

我们可以传递给它一个选择器字符串来使用。

SCSS:
.thing { 
  @include not-last-child('p') { 
    color: red; 
  } 
} 

CSS:
.thing p:not(:last-child) { 
  color: red; 
} 

Sass Documentation


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!