我正在try 将filter: grayscale(100%);中的100%设置为一个css变量,这样我以后就可以用JavaScript动态更改它.

--percent: 100%;
filter: grayscale(var(--percent));

这不是用dart 萨斯编译的.它在告诉我:

Dart Sass失败,错误如下:$COLOR:var(--%)不是 colored颜色 .滤镜:灰度(var(--百分比));

这对我来说没有任何意义,因为它可以工作just fine with normal CSS.

我如何才能让这个普通的css变量与Dart Sass一起使用?

推荐答案

因为它与the grayscale method of Sass冲突,并且特定于Sass的方法不能处理CSS变量.

这样使用它:

--percent: 100%;
filter: #{"grayscale(var(--percent))"};

Css相关问答推荐

R SHINY:FILL CONTAINER=TRUE时调整DT数据表高度,

如何在Angular material 选项卡中设置自定义圆角下划线的样式

如何使用TailwindCSS溢出?

react native 容器样式

位置:固定元素只是不固定

无法在 React 组件 (TypeScript) 中应用 Tailwind CSS 类

当鼠标移到侧边栏之外时,如何防止shiny 仪表板侧边栏菜单中的 pickerInput 选项被切断?

根据现有值计算CSS变量的新值

当值小于 1 时理解 flex-shrink

如何在悬停另一个部分的元素时使元素可见?

未知规则 @propertycss(unknownAtRules)

在 vuetify 中跨 `default.vue` 和 `index.vue` 维护网格系统

更改最后一个
  • 的 CSS
  • Flexbox 列自底对齐

    如何填充 100% 的剩余高度?

    如何使用 CSS 绘制复选标记/勾号?

    更改 FontAwesome 图标的字体粗细?

    了解 Bootstrap 3 中的网格类( col-sm-# 和 col-lg-# )

    你如何在 SASS 中定义属性 Select 器?

    如何将 HTML
    显示为内联元素?