萨斯:第一个孩子不工作

css CSS

小宇宙

2020-03-23

我已经很长时间没有使用SASS了,想知道伪元素是否存在某些问题,例如:first-childor :last-child

第2600篇《萨斯:第一个孩子不工作》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
小胖路易 2020.03.23

首先,仍然有一些不支持这些伪元素的浏览器(例如:: first-child,:last-child),因此您必须处理这个问题。

有一个很好的示例,如何不使用伪元素就可以使它起作用:

http://www.darowski.com/tracesofinspiration/2010/01/11/this-newbies-first-impressions-of-haml-and-sass/

       -请参阅分隔管示例。

我希望这是有用的。

斯丁前端 2020.03.23

我觉得这是更好的(我的expirience)使用方法::first-of-type:nth-of-type():last-of-type可以对规则进行一些更改,但是我可以做的*-of-type*-child选择器还多。

猴子村村 2020.03.23

尽管@Andre是正确的,但伪元素及其支持存在问题,尤其是在较旧的(IE)浏览器中,但这种支持一直在改善。

关于您的问题,有什么问题,我想说我还没有真正看到过,尽管伪元素的语法可能有些棘手,尤其是在第一次使用它时。所以:

div#top-level
  declarations: ...
  div.inside
    declarations: ...
    &:first-child
      declarations: ...

可以像预期的那样编译:

div#top-level{
  declarations... }
div#top-level div.inside {
  declarations... }
div#top-level div.inside:first-child {
  declarations... }

除了“ sass可以做css可以做的所有事情”这样的说法外,我还没有看到任何有关这方面的文档。与以往一样,使用Haml和SASS,缩进就是一切。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android