用于计算外部作用域中的变量时，CSS作用域定制属性被忽略
用于计算外部作用域中的变量时，CSS作用域定制属性被忽略
我试图通过var自定义属性来缩放大小，这种方式可以在没有耦合的情况下构成类。期望的效果是3个列表将是3个不同的比例，但是如CodePen所示，所有3个列表都是相同的比例。我正在寻找范围的解释和CSS自定义属性技术，可以使用可组合的松散耦合代码实现这一点。
:root {
--size-1: calc(1 * var(--scale, 1) * 1rem);
--size-2: calc(2 * var(--scale, 1) * 1rem);
--size-3: calc(3 * var(--scale, 1) * 1rem);}.size-1 { font-size: var(--size-1) }.size-2 { font-size: var(--size-2) }.size-3 { font-size: var(--size-3) }.scale-1x { --scale: 1 }.scale-2x { --scale: 2 }.scale-3x { --scale: 3 }html {
font: 1em sans-serif;
background: papayawhip;}ol {
float: left;
list-style: none;
margin: 1rem;}<ol class="scale-1x"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol><ol class="scale-2x"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol><ol class="scale-3x"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol>
蝴蝶不菲浏览 480回答 2
2回答
-
当年话下
这很棘手，但在您的情况下，您已经--scale在根级别评估了自定义属性以定义--size-*属性，然后您--scale 再次定义了内部子元素。这不会再次触发评估，因为它已经在较高级别完成。这是一个简单的例子来说明这个问题：.box { --color: var(--c, blue);}span { color: var(--color);}<div> <div class="box"><!-- --c is evaluated at this level --> <span style="--c:red">I will not be red because the property is already evaluated and --color is set to blue using the default value</span> </div></div><div style="--c:red"> <div class="box"><!-- --c is evaluated at this level --> <span>I will be red because at the time of the evaluation --c is red (inherited from the upper div)</span> </div></div>要解决您的问题，您需要将声明从定义移至:root相同级别--scale：.scale { --size-1: calc(1 * var(--scale, 1) * 1rem); --size-2: calc(2 * var(--scale, 1) * 1rem); --size-3: calc(3 * var(--scale, 1) * 1rem);}.size-1 { font-size: var(--size-1) }.size-2 { font-size: var(--size-2) }.size-3 { font-size: var(--size-3) }.scale-1x { --scale: 1 }.scale-2x { --scale: 2 }.scale-3x { --scale: 3 }html { font: 1em sans-serif; background: papayawhip;}ol { float: left; list-style: none; margin: 1rem;}<ol class="scale-1x scale"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol><ol class="scale-2x scale"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol><ol class="scale-3x scale"> <li class="size-1">size 1</li> <li class="size-2">size 2</li> <li class="size-3">size 3</li></ol>在这种情况下，--scale定义在与其评估相同的级别，因此--size-*将针对每种情况正确定义。从规格：要在属性值中替换var（）：如果var（）函数的第一个参数指定的自定义属性是动画污染的，并且var（）函数正在动画属性或其中一个长整数中使用，请将自定义属性视为具有其初始值。其余的这个算法。如果var（）函数的第一个参数指定的自定义属性的值不是初始值，则将var（）函数替换为相应自定义属性的值。除此以外，如果var（）函数的回退值作为其第二个参数，则用回退值替换var（）函数。如果后备中有任何var（）引用，也可以替换它们。否则，包含var（）函数的属性在计算值时间无效在您的第一种情况下，您将落入3，因为--scale在根级别没有指定值。在最后一种情况下，我们将陷入2，因为我们--scale在同一级别定义并且我们有其价值。在所有情况下，我们应该避免任何:root级别的评估，因为它根本没用。根级别是DOM中的最高级别，因此所有元素都将继承相同的值，除非我们再次评估变量，否则不可能在DOM内部具有不同的值。您的代码与此代码相同：:root { --size-1: calc(1 * 1 * 1rem); --size-2: calc(2 * 1 * 1rem); --size-3: calc(3 * 1 * 1rem);}让我们再看一个例子：:root { --r:0; --g:0; --b:255; --color:rgb(var(--r),var(--g),var(--b))}div { color:var(--color);}p { --g:100; color:var(--color);}<div> some text</div><p> some text</p>直觉上，我们可能认为我们可以--color通过改变在:root级别定义的3个变量之一来改变它，但我们不能这样做，上面的代码与这个相同：:root { --color:rgb(0,0,255)}div { color:var(--color);}p { --g:100; color:var(--color);}<div> some text</div><p> some text</p>该3个变量（--r，--g，--b）进行评估里面:root，所以我们已经与他们的价值观取代他们。在这种情况下，我们有两种可能性：更改:root使用JS或其他CSS规则中的变量。这不允许我们有不同的颜色：:root { --r:0; --g:0; --b:255; --color:rgb(var(--r),var(--g),var(--b))}div { color:var(--color);}p { --g:200; /*this will not have any effect !*/ color:var(--color);}:root { --g:200; /*this will work*/}<div> some text</div><p> some text</p>在所需元素内再次评估变量。在这种情况下，我们将失去任何灵活性，内部的定义:root将变得无用（或至少将成为默认值）：:root { --r:0; --g:0; --b:255; --color:rgb(var(--r),var(--g),var(--b))}div { color:var(--color);}p { --g:200; --color:rgb(var(--r),var(--g),var(--b)); color:var(--color);}<div> some text</div><p> some text</p>考虑到这一点，我们应该始终将评估保持在DOM树中的最低点，尤其是在变量发生变化之后（或者在同一级别）这是我们不应该做的:root { --r: 0; --g: 0; --b: 0;}.color { --color: rgb(var(--r), var(--g), var(--b))}.green { --g: 255;}.red { --r: 255;}p { color: var(--color);}h1 { border-bottom: 1px solid var(--color);}<div class="color"> <h1 class="red">Red </h1> <p class="red">I want to be red :(</p></div><div class="color"> <h1 class="green">Green </h1> <p class="green">I want to be green :(</p></div>这是我们应该做的:root { --r:0; --g:0; --b:0;}.color { --color:rgb(var(--r),var(--g),var(--b));}.green { --g:255;}.red { --r:255;}p { color:var(--color);}h1 { border-bottom: 1px solid var(--color);}<div class="red"> <h1 class="color">Red title</h1> <p class="color">Yes I am red :D</p></div><div class="green"> <h1 class="color">Green title</h1> <p class="color">Yes I am green :D</p></div>我们也可以这样做：:root { --r:0; --g:0; --b:0;}.color { --color:rgb(var(--r),var(--g),var(--b));}.green { --g:255;}.red { --r:255;}p { color:var(--color);}h1 { border-bottom: 1px solid var(--color);}<div class="red color"> <h1 >Red title</h1> <p >Yes I am red :D</p></div><div class="green color"> <h1>Green title</h1> <p >Yes I am green :D</p></div> -
叮当猫咪
因为CSS从上到下...假设您使用的是继承，父元素是否可以从其子元素继承？不...这里的逻辑相同，根在评估时看不到--scale属性。因此，如果一个子元素改变了一个属性，我们就不会反过来重新评估所有的父属性，这将创建周期并且它将无法工作
随时随地看视频慕课网APP
Html/CSS