无涯教程网

SCSS LightenDarken 不编译

发布于02月24日

在我的主文件styles.scss中，我声明了一个变量:

$primary  : #1e4f9c;
$change   : 15%;

然后，我导入另一个SCSS文件:

@import "/project-assets/css/layout.scss";

在该文件中，我创建了css变量:

:root {
    --primary: #{$primary};
    --primary-light: lighten(#{$primary}, #{$change});
    --primary-dark: darken(#{$primary}, #{$change});
}

但出于某种原因，此处的输出不是新的十六进制值，而是函数调用保持原样:

:root {
    --primary: #1e4f9c;
    --primary-light: lighten(#1e4f9c, 15%);
    --primary-dark: darken(#1e4f9c, 15%);
}

我发现Lightten函数没有像预期的那样工作，并将其更改为color.scale，但输出仍在SCSS中，而不是更改为十六进制.我错过了什么吗？

推荐答案

Css变量只能存储静态值，不能存储函数？试着这样做:

$primary: #1e4f9c;
$change: 15%;
:root {
  --primary: #{$primary};
  --primary-light: #{lighten($primary, $change)};
  --primary-dark: #{darken($primary, $change)};
}

Css相关问答推荐

我控制的自定义单选按钮无法重新 Select

相对于现有的转换3D应用关键帧动画

显示Reaction组件上的问题.使用FlexBox时的意外大小

使用 Vuetify 的 sass 变量时出错

如何让 v-col 变成可滚动的？

如何更改导航栏标题中链接的文本 colored颜色和导航丸中的链接(在shiny 的应用程序中)？

悬停时如何更改 navbarPage 链接的文本 colored颜色 (在shiny 的应用程序中)？

CSS Select 器在 rvest 中找到，在 RSelenium 中找不到

用css画3个三角形

停止 div 推动另一个 div 做出react

你可以在 CSS 中扩展实体(entity)吗？

我应该避免使用text-align： justify;吗？

CSS - 等高列？

使用 CSS/HTML 更改悬停图像

使用 CSS 强制侧边栏高度 100%(带有粘性底部图像)？

如何更改 Angular Material 上 mat-icon 的大小？

有没有办法让字段集的宽度与它们中的控件一样宽？

如何在 Firefox 和 Opera 中zoom HTML 元素？

可变高度的 CSS 浮动 div

Unicode 通过 CSS ：before

实用课程推荐

相关教程推荐