css-variables Questions
3
Solved
For the html:
<body>
<div>
<div>
<div>
...
</div>
</div>
</div>
</body>
Are there any ways to create a recursive variable that uses its paren...
Burcham asked 23/4, 2018 at 5:23
3
Solved
Not sure if anyone encountered this problem (I've seen similar but not exactly) but on Mac OSX Safari browser the following problems happen when you use the variable for a relative image location f...
Willey asked 22/3, 2021 at 19:3
2
Solved
I'm considering replacing SCSS variables (i.e. $someValue) with CSS custom properties (e.g. var(--someValue)) in an attempt to both allow for a little more flexibility in the form of theming and co...
Leaky asked 19/4, 2021 at 7:14
2
Solved
I have JS library and I have this issue: I'm creating temporary element for calculating size of character using monospace font. Right now I'm copying inlie style, but I need all styles from origina...
Silage asked 2/1, 2019 at 10:24
1
Trying to use CSS variables for the first time. Doing it in a react (create-react-app) application, and works great. Only issue is that there's no warnings if I mistype a variable name or just simp...
Expatiate asked 4/5, 2019 at 15:26
4
Solved
I wonder if it is possible to have a CSS rule only applied if a css variable is defined. I've seen it is possible to define a default value, something like:
background-color: var(--bgColor, red);
...
Twinscrew asked 27/7, 2021 at 14:24
12
Solved
I am trying to use CSS variables in media query and it does not work.
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
Liles asked 21/11, 2016 at 14:47
5
Solved
How do you get and set CSS custom properties (those accessed with var(…) in the stylesheet) using JavaScript (plain or jQuery)?
Here is my unsuccessful try: clicking on the buttons changes the usu...
Socialite asked 18/3, 2016 at 15:45
3
Solved
Is it possible to add a classname to a CSS variable or is there some other way to set it up so that I don't have to manipulate each individual variable directly via javascript? I'd like to keep all...
Labour asked 31/3, 2019 at 9:11
2
Solved
I'm trying to change the background color of a dialog element's backdrop using a custom CSS property but it won't take. Is this a bug in Chrome or is there a reason for this?
document.querySele...
Bradshaw asked 12/11, 2019 at 12:1
2
Solved
I have some CSS where I want a default color and then override it with a variable. When the CSS Variable doesn't exist, I want to use the fallback color.
:root {
/*--tintColor: red;*/
}
.text {
...
Lovemaking asked 17/4, 2019 at 15:7
1
At the head of my page, I have a bunch of CSS Custom Properties that work in all of my stylesheets, however, when I try to access them via ::before/::after pseudo-elements, Chrome states that the v...
Cockatoo asked 16/3, 2022 at 17:37
3
I have relatively complex formulas e.g. transform: scale(var(--image-scale)) translateY(calc((1px * var(--element-height) * (var(--image-scale) - 1)) / 2 * var(--scrolled-out-y)))
how do I debug c...
Beason asked 18/11, 2018 at 18:30
6
I'm trying to use CSS variables to generate a dynamic path.
Example:
:root {
--fonts-path: "/path/to/font";
}
@font-face {
font-family: "FontName";
src: url(var(--fonts-path) + "/FontName-Li...
Quixote asked 12/7, 2016 at 18:23
8
I am using css root variables in my project for dynamically changing the colors of all elements anytime.
My css looks like
:root{
--primaryColor:aliceblue;
--secondaryColor:blue;
--errorColor:...
Weathered asked 13/2, 2018 at 5:52
2
Solved
Is it possible to use calc() function in CSS to manipulate hexadecimal color value?
In following CSS snippet I would like to use --enable variable to switch between two hexadecimal color values fo...
Atheroma asked 27/6, 2018 at 13:5
18
Solved
I am designing an app in electron, so I have access to CSS variables. I have defined a color variable in vars.css:
:root {
--color: #f0f0f0;
}
I want to use this color in main.css, but with som...
Census asked 13/10, 2016 at 0:51
2
Solved
I want to create a component and expose certain properties that could be overridden by parent elements.
I want those properties to be declared on top of the CSS class declaration so that they...
Shooin asked 23/5, 2018 at 13:28
6
I enjoy using CSS custom properties, but there's this thing that I often find that I wish I could do.
I wish to be able to apply some styles conditionally based on the value of a CSS custom propert...
Terrijo asked 2/10, 2018 at 21:55
2
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 th...
Cathryncathy asked 31/8, 2020 at 8:33
3
Solved
Let me start by showing you how I would do this in SCSS:
$submenu-padding-left: 1.5em;
transform: translateX(calc(-#{$submenu-padding-left} + .5em));
which would compile to:
transform: transla...
Hanse asked 6/2, 2018 at 9:43
2
I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.
The lack of ...
Schleiermacher asked 7/10, 2015 at 13:37
2
Solved
This is a somewhat general question.
Is anybody aware of the effects on performance of using many CSS variables within a given document? Has anybody done any tests?
Does the element to which you ...
Ozoniferous asked 7/6, 2019 at 16:15
3
I'm testing a CSS framework for specifying numbers via micro-classes. For instance, something like <div class="fifty percent wide"> might translate into width: 50%. The implementation uses CS...
Finedrawn asked 15/11, 2016 at 6:47
2
Solved
I set the display property for divs to in
line-block. I then created four classes:
no-var, which sets display to inherit
var, which sets display to a variable set to inherit
var-none, which sets ...
Shoring asked 8/11, 2018 at 18:19
1 Next >
© 2022 - 2024 — McMap. All rights reserved.