css-variables

问题 The title says it all. I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic. Is it the same as the biggest number in JavaScript? When I try this with transform the limit seems to be 1e39 (in Chrome and for transform: translateX() ) div span { display: block; width: 100px; height: 100px; background-color: gold; } div:nth-child(1) span { -webkit-transform: translatex(calc(1e38px * 1e-37)); transform: translatex(calc(1e38px * 1e-37)); } div:nth-child(2) span {

问题 The title says it all. I want to know, which is the biggest number I can use in CSS inside a calc() arithmetic. Is it the same as the biggest number in JavaScript? When I try this with transform the limit seems to be 1e39 (in Chrome and for transform: translateX() ) div span { display: block; width: 100px; height: 100px; background-color: gold; } div:nth-child(1) span { -webkit-transform: translatex(calc(1e38px * 1e-37)); transform: translatex(calc(1e38px * 1e-37)); } div:nth-child(2) span {

问题 I want to have a basic HSL color value which I want to implement as a gradient as follows: :root { --hue: 201; --saturation: 31; --lightness: 40; --mainColor: hsl(var(--hue),var(--saturation),var(--lightness)); --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */ --lightnessPlus: calc(var(--lightness) + var(--difference)); --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus)); --lightnessMinus: calc(var(--lightness) - var(--difference)); --colorTo: hsl(var

问题 I want to have a basic HSL color value which I want to implement as a gradient as follows: :root { --hue: 201; --saturation: 31; --lightness: 40; --mainColor: hsl(var(--hue),var(--saturation),var(--lightness)); --difference: 20; /* 0 + --difference < --lightness < 100 - --difference */ --lightnessPlus: calc(var(--lightness) + var(--difference)); --colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus)); --lightnessMinus: calc(var(--lightness) - var(--difference)); --colorTo: hsl(var

问题 Does global variables in CSS are less efficient in terms of memory or in terms of efficiency as local CSS variables? so basically my question is whether there's any benefit of having variable which is declared in the the global scope and can be accessed anywhere in the CSS opposed to variables which are declared within the code block of a particular selector and scoped locally in respect to the selector. when talking about global scope i mean: :root { --mainColor: red } and local scope means:

问题 Does global variables in CSS are less efficient in terms of memory or in terms of efficiency as local CSS variables? so basically my question is whether there's any benefit of having variable which is declared in the the global scope and can be accessed anywhere in the CSS opposed to variables which are declared within the code block of a particular selector and scoped locally in respect to the selector. when talking about global scope i mean: :root { --mainColor: red } and local scope means:

问题 Consider I have a long list of SASS variables in different .scss files like this: $app-color-white: #ffffff; $app-color-black: #000000; What would be the most effective way to export these variables as vanilla CSS variables? :root { --app-color-white: #ffffff; --app-color-black: #000000; } Maybe, there is a SASS-way or even some pre-processor? I want my SASS framework to be also used in vanilla CSS projects. 回答1: I think the best way to do this would be using something like a variable map; E

问题 I have the following CodePen: Test LCD with CSS Variables, in which upon clicking labels with specific digits, results in the appropriate LCD segments to be "lit" based on algebraic equations I've determined to mimic a BCD to 7-Segment Display Decoder, in order to simulate an LCD display... I currently have the first segment's equation mentioned in the CSS. Clicking on a digit in the CSS should theoretically result in the appropriate four --input variables to be populated with a pulse (0 or 1

问题 If i do this: .a { border: var(--a-border); border-left: var(--a-border-left); border-right: var(--a-border-right); border-top: var(--a-border-top); border-bottom: var(--a-border-bottom); } Setting --a-border never works because individual properties like a-border-left have reset the value. What i'm thinking is that, i'm not giving any default values on those exported variables. Therefore, if --a-border is set, it should take precedence over other unset values. 回答1: As I explained in this

问题 When I define a variable in various CSS files, and include these files in my HTML file, then it overrides the previous variable. Why is it happening? Let's say that I have test1.css :root { --size-of-font: 5rem; } .logo{ font-size: var(--size-of-font); } test2.css :root { --size-of-font: 1.2rem; } .outer { font-size: var(--size-of-font); cursor: pointer; text-align: center; } test.html <link rel="stylesheet" href="test1.css"> <link rel="stylesheet" href="test2.css"> <div class="outer"> <h1