【问题标题】:How do I use a wildcard asterisk CSS selector in SASS? [closed]如何在 SASS 中使用通配符星号 CSS 选择器? [关闭]
【发布时间】:2015-12-04 02:42:04
【问题描述】:

在使用 SASS 时如何使用“*”CSS 通配符选择器?例如,我将如何制作以下 CSS 代码 SASSy?

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  line-height: 1;
}
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

编辑:

感谢您到目前为止的回答,但让我澄清一下。我意识到代码示例有许多不同的观点。代码示例不是问题。问题仍然存在,我如何使用* 选择器? SASS 解析器在遇到* 时会抛出语法错误,并说它遇到了*,但需要一个选择器。我在 Mac OSX 10.9.5 上使用 Sass 3.4.19 (Selective Steve)。

编辑 2:

我找到了解决方案。该错误是由在紧接在* 代码块之前的行中包含的文件中缺少; 引起的。这就是处理其他人代码的生活。我将把答案授予@torazaburo,因为他是唯一一个真正解决这个问题并让我重新思考其他可能性的人。

【问题讨论】:

  • 为什么要把它设为“SASSy”?你认为“SASSy”是什么意思?为什么你会认为* 在 CSS 预处理器中的工作方式与在常规 CSS 中的工作方式不同?顺便说一句,box-sizing 不需要供应商前缀。
  • SASS 解析器不允许* 选择器。请查看我的编辑。
  • 无法重现,通配符选择器不会抛出语法错误:sassmeister.com/gist/2cc406d17d20904bfddd
  • 但这就是我的意思。 “X有效吗?”是一个可怕的问题,只能用“是”或“否”来回答。您可以通过自己测试来回答它。 torazaburo 一开始就应该知道不应该回答这样的问题。
  • @cimmanon 我对这个问题的第一条评论是为什么您认为* 在 CSS 预处理器中的工作方式与在常规 CSS 中的工作方式不同?对于 OP 来说,这是一个非常好的时间来谈论 * 根本不适合他,在这种情况下,事情会朝着完全不同的方向发展。事实上,问题似乎只是关于修改一些碰巧涉及星号的 CSS,使其更像 SASS。

标签: css sass css-selectors wildcard


【解决方案1】:

在这里,SASS 几乎没有什么可以帮助您的。您不需要供应商前缀。随便写

*, ::before, ::after {
  box-sizing: border-box;
}

* {
  line-height: 1;
}

*::before还是::before是个人喜好问题。

我必须使用 SASS 的心态是说我 必须 编写

*::before 

规则为

* { 
  &::before

因为无论如何我必须使用嵌套,因为我可以。其实并不是。你的 CSS 通常更干净,嵌套更少(或零)。 (通常完全没有 SASS 会更清楚,但这是另一天的话题。)

在使用 SASS 时如何使用 * CSS 通配符选择器?

* 到 SASS 并没有什么特别之处。它只是另一个选择器。您可以像使用任何其他选择器一样使用它。

【讨论】:

  • 另外值得注意的是,如果你绝对必须屈服于嵌套的诱惑,你可以使用*{ line-height: 1; &,&::before,&::after{ box-sizing: border-box; } }来使用&,来自引用父元素
  • 我理解 SASS,这是一个随意的例子。问题是如何使用 * 选择器。您提到 SASS 将其视为另一个选择器,但实际上它会引发语法错误。 SASS 不喜欢 * 字符。
  • 我已接受您的回答。请在 OP 中查看我的 cmets。
【解决方案2】:
*
 ...
  &:before, &:after
    ...

& 代表当前选择器。例如foo { .bar { } }foo .barfoo { &.bar { } } 匹配 foo.bar

【讨论】:

  • 在这种情况下这样做有什么好处?
  • @torazaburo:我没注意块是一样的;如果我注意到了,我可能会像你一样回答。但总的来说,当它指定更一般规则的例外时,嵌套会提高清晰度;我以为用户在询问一般情况和 SASS 语法。
  • 是的,他问的是一般大小写和 sass/scss 语法。
猜你喜欢
  • 2019-03-21
  • 1970-01-01
  • 1970-01-01
  • 2011-02-14
  • 2013-11-01
  • 1970-01-01
  • 2021-01-21
  • 1970-01-01
  • 2023-03-08
相关资源
最近更新 更多