css - 使用 SASS 动态生成的 css 类？

Question

我有以下混合:

@mixin background-fixed($xPosition: "center", $yPosition: "33%")
background-position: unquote($xPosition) unquote($yPosition)
...

它的用法:

.photo-background
  @include background-fixed("center", "60%")
  ...

有没有办法通过类名在 HTML 中定义 $yPosition，例如 .photo-background-60(或其他方式)？我希望动态传递此值，而不仅仅是定义 100 个具有所有可能值的相同类。

Answer 1

不，目前无法使用 Sass。

而且很可能永远不会。

Sass 是一个 CSS 预处理器，因此它在浏览器可以使用之前被编译成 CSS。获取属性、解析它以找到数字、然后将字符串转换为整数所需的功能可能永远不会实现，因为 CSS 是一种样式语言。

虽然 CSS 确实提供了选择器来选择部分匹配的类，例如:

[class*="photo-background-"]{}

它将匹配任何具有以 photo-background- 开头的类的元素。但是，您无法根据类名动态设置背景位置。

只需改用 Javascript。