Sass和组合子选择器

CSS

蛋蛋古一

2020-03-17

我刚刚发现了Sass，对此感到非常兴奋。

在我的网站中，我实现了一个树状的导航菜单，该菜单使用子组合器（E > F）设置样式。

有什么方法可以在Sass中使用更简单（或更优）的语法来重写此代码？

#foo > ul > li > ul > li > a {
  color: red;
}

第1967篇《Sass和组合子选择器》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
十三西里GO 2020.03.17

没有组合的子选择器，您可能会执行以下操作：

foo {
  bar {
    baz {
      color: red;
    }
  }
}

如果您想使用复制相同的语法>，可以这样做：

foo {
  > bar {
    > baz {
      color: red;
    }
  }
}

编译为：

foo > bar > baz {
  color: red;
}

或无礼：

foo
  > bar
    > baz
      color: red
NearGilSam 2020.03.17

对于您所拥有的一条规则，没有什么更短的方法了。子组合器在CSS和Sass / SCSS中是相同的，没有其他选择。

但是，如果您有多个这样的规则：

#foo > ul > li > ul > li > a:nth-child(3n+1) {
    color: red;
}

#foo > ul > li > ul > li > a:nth-child(3n+2) {
    color: green;
}

#foo > ul > li > ul > li > a:nth-child(3n+3) {
    color: blue;
}

您可以将它们压缩为以下之一：

/* Sass */
#foo > ul > li > ul > li
    > a:nth-child(3n+1)
        color: red
    > a:nth-child(3n+2)
        color: green
    > a:nth-child(3n+3)
        color: blue

/* SCSS */
#foo > ul > li > ul > li {
    > a:nth-child(3n+1) { color: red; }
    > a:nth-child(3n+2) { color: green; }
    > a:nth-child(3n+3) { color: blue; }
}

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

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