我误解了css变量的功能吗？我试图将背景图像URL传递给这样的变量:当我传递像颜色等简单的东西时,它似乎工作得很好......
:root {
--slide-1: url(/static/images/slideshow/slide1.jpg) ;
--slide-2: url(/static/images/slideshow/slide2.jpg) ;
--slide-3: url(/static/images/slideshow/slide3.jpg) ;
--slide-4: url(/static/images/slideshow/slide4.jpg) ;
--slide-5: url(/static/images/slideshow/slide5.jpg) ;
}
//and then
.jumbotron > .jumbotron-slideshow:nth-child(1) {
background-image: var(--slide-1);
}
.jumbotron > .jumbotron-slideshow:nth-child(2) {
animation-delay: 6s;
background-image: var(--slide-2);
}
.jumbotron > .jumbotron-slideshow:nth-child(3) {
animation-delay: 12s;
background-image: var(--slide-3);
}
.jumbotron > .jumbotron-slideshow:nth-child(4) {
animation-delay: 18s;
background-image: var(--slide-4);
}
.jumbotron > .jumbotron-slideshow:nth-child(5) {
animation-delay: 24s;
background-image: var(--slide-5);
}
有没有办法使用Sass函数的CSS变量,例如减轻？像这样的东西:
:root {
--color: #ff00ff;
}
.div {
background-color: lighten(var(--color), 32%);
}
我收到一条错误消息,"论证$color的lighten($color, $amount)必须是一种颜色".
我正在使用CSS(而不是Sass)变量,因为我需要在js中使用它们.
我正在尝试使用CSS3自定义属性(又名CSS变量)取得很大成功.我在谈论--black: #000;和background: var(--black);类型变量.但是,当变量在单独的链接文档中声明时,我没有运气.
随着CSS自定义属性超过72%的浏览器兼容性(src:https://caniuse.com/#search=css%20variables),我很想开始在一个非常特定的应用程序中使用它们,我知道我的观众正在使用它们兼容浏览器.
我想知道这些CSS自定义属性是否在所有链接的CSS文档中都是全局的,或者它们是否只是:root每个文档的全局(在元素中)？
我无法找到答案(即使在规范中)!
我读到的一些研究:
我的具体问题发生在Ruby on Rails应用程序中,其中我将CSS自定义属性包含在<style>SCSS样式表之前的块中,其中包括部署时要预编译的样式.如果我将变量包含在SCSS的顶部,一切正常.但是该<style>块包含主题变量,需要在运行时由ERB编译.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
:root {
--primary-color: #000;
}
</style>
<%= stylesheet_link_tag 'application', media: 'all' %>
</head>
</html>
我正在尝试使用定义为 css 变量的现有颜色创建一个材质 ui 主题my-pallette.scss：
:root {
--primary-color: '#FF0000';
...
}
并像这样使用它：
import { createMuiTheme } from '@material-ui/core/styles';
export const muiTheme = createMuiTheme({
palette: {
primary: {
main: 'var(--primary-color)',
},
},
});
这会引发错误：
未捕获的错误：Material-UI：不支持的
var(--primary-color)颜色。我们支持以下格式：#nnn、#nnnnnn、rgb()、rgba()、hsl()、hsla()。
根据此 Github 线程：支持 CSS 变量作为主题选项，目前尚不支持。
有什么解决方法可以让我在 Material ui中用var(--primary-color)作主色createMuiTheme吗？
最终目标是以最简单的形式使用材质 ui 组件，其主要、次要等颜色被我的颜色覆盖。
<Radio color="primary" />
我尝试使用我的托盘中的颜色，如下所示：
const cssVariables = {
primaryColor: getComputedStyle(document.documentElement).getPropertyValue('var(--primary-color)'),
};
并使用cssVariables.primaryColor但这不起作用并且感觉非常违反直觉。
我的最后一个解决方案是将调色板复制为普通对象，并按原样使用它，但这对于维护来说似乎是一场噩梦。
有没有办法用JavaScript对ie11的自定义CSS属性进行pollyfill？我正在考虑加载,检查浏览器是否支持自定义属性,如果没有在属性上进行某种查找和替换.
JavaScript或某些库可以实现这一点吗？
谢谢
在预处理器中,如SASS,您可以使用负值,如:
$margin-md: 10px;
.class {
margin-bottom: -$margin-md;
}
如何使用自定义属性执行此操作？
// This doesn't work
.class {
margin-bottom: -var(--margin-md);
}
看这个动画：
@keyframes roll-o-1animates --o）。@keyframes roll-o-2animates left）。为什么金色 div 动画不流畅？
是否有任何解决方法也使用变量？
#one {
width: 50px;
height: 50px;
background-color: gold;
--o: 0;
animation: roll-o-1 2s infinite alternate ease-in-out both;
position: relative;
left: calc(var(--o) * 1px);
}
@keyframes roll-o-1 {
0% {
--o: 0;
}
50% {
--o: 50;
}
100% {
--o: 100;
}
}
#two {
width: 50px;
height: 50px;
background-color: silver;
--o: 0; …是否可以在CSS变量中添加类名，或者是否可以通过其他方法进行设置，这样我就不必直接通过javascript操作每个变量了？我想将所有样式保留在CSS中，并仅使用JS打开相关的类。例如，如果在CSS中可能出现类似情况：
:root.white{ --bgcol:#FFF; --col:#000; }
:root.black{ --bgcol:#000; --col:#FFF; }
然后，我可以直接从javascript 切换.blackor或.whiteclass来触发所有var进行更改。这种设置的最佳方法是什么？
我正在尝试在Angular项目中将CSS变量与Sass函数一起使用（准确地说是lighten()/ darken()），据我所知，最新版本的LibSass允许它。
我已经安装node-sass@4.11.0和sass-loader@7.1.0（和角V7.3.0），但我却收到错误
参数$ color of lighten（$ color，$ amount）必须是颜色
我想念什么吗？
谢谢！
我已经四处寻找这个，但似乎没有一个起作用。
我正在研究 Angular，并将我的 scss 变量放在根文件、styles.scss 中：root 伪选择器中。以下在我的组件 scss 中有效；
:root {--color-primary-green:#00e676}
background-color:var(--color-primary-green);
当我尝试使用 rgba 时，颜色消失了，即
background-color: rgba(var(--color-primary-green), 0.5);
我该如何解决这个问题？
css-variables ×10
css ×6
css3 ×4
javascript ×3
sass ×3
material-ui ×1
node-sass ×1
sass-loader ×1
variables ×1