使用伪选择器嵌套Sass Ampersand

尝试使用SASS＆符号获取以下CSS输出。当我们在内部的pesudo选择器中使用＆符时它不起作用。使用伪选择器嵌套Sass Ampersand

CSS

.test:first-child .test-image { display: block; }

SASS

.test { 
    &:first-child { 
     display: inline-block; 
     &-image { 
      display: block; 
     } 
    } 
}

上面的代码基本上与级联第一子 - 图像。

来源

2016-11-22 Lokesh Yadav

这是因为符号只是串联与孩子家长。如果你想编译CSS看起来像你的榜样，你需要这样做：

.test { 
    &:first-child &-image{ 
     display: block;  
    } 
}

来源

2016-11-22 06:44:07 davidatthepark

感谢大卫面前，它为我工作。一个简单的问题，如果第一个孩子在它里面还没有几个css proerpties，那么我是否需要为第一个孩子编写一个单独的嵌套？ –

这是一个非常好的问题。我只是做了一些测试，它看起来像你可以这样做： '''.test {：{0} {0}} {：1}：first-child {height：20px; ＆.test-image { height：30px; } } }''' 我学到了新东西！如果你能检查我的答案是否正确，那也会很好〜 – davidatthepark

如果你正在努力实现

.test:first-child .test-image { display: block; }

与您的代码是越来越编译为这个

.test:first-child-image { 
    display: block; 
}

相反，你可以简单地把它写成这样。

.test:first-child { 
     .test-image { 
      display: block; 
     } 
}

希望它可以帮助

来源

2016-11-22 06:43:11 Geeky

你应该使用'：''第一child' – pwolaq

这听起来像你有误会的符号在萨斯是如何工作的。和号本质上是写入每个外部选择器，然后在选择器之后添加选择器到达结尾的简写。由于.test-image不同于.test，因此您应该如下指定它。

.test { 
    &:first-child { 
     .test-image { 
      display: block; 
     } 
    } 
}

编译成

.test:first-child .test-image { 
    display: block; 
}

来源

2016-11-22 06:43:36 Gerrit0

使用伪选择器嵌套Sass Ampersand

回答

相关问题