css-variables | 易学教程

How to store inherit value inside a CSS custom property (aka CSS variables)?

阅读更多关于 How to store inherit value inside a CSS custom property (aka CSS variables)?

问题 Let's consider this simplified example in order to illustrate the issue: :root { --color:rgba(20,20,20,0.5); /*defined as the default value*/ } .box { width:50px; height:50px; display:inline-block; margin-right:30px; border-radius:50%; position:relative; } .red {background:rgba(255,0,0,0.5);} .blue {background:rgba(0,255,0,0.5);} .box:before{ content:""; position:absolute; top:0;left:0;right:0;bottom:0; border-radius:50%; transform:translateX(30px); background:var(--color); filter:invert(1);

Accessing a CSS custom property (aka CSS variable) through JavaScript

阅读更多关于 Accessing a CSS custom property (aka CSS variable) through JavaScript

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 usual font-weight property, but not the custom --mycolor property: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <style> body { --mycolor: yellow; background-color: var(--mycolor); } </style> </head> <body> <p>Let's try to make this text bold and the background red.</p> <button onclick="plain_js()">Plain JS</button> <button onclick="jQuery_()"

How can I define colors as variables in CSS?

阅读更多关于 How can I define colors as variables in CSS?

I’m working on a CSS file that is quite long. I know that the client could ask for changes to the color scheme, and was wondering: is it possible to assign colors to variables, so that I can just change a variable to have the new color applied to all elements that use it? Please note that I can’t use PHP to dynamically change the CSS file. Arthur Weborg CSS supports this natively with CSS Variables . Example CSS file :root { --main-color:#06c; } #foo { color: var(--main-color); } For a working example, please see this JSFiddle (the example shows one of the CSS selectors in the fiddle has the

How can I get a negative value of a CSS variables in a calc() expression?

阅读更多关于 How can I get a negative value of a CSS variables in a calc() expression?

问题 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: translateX(calc(-1.5em - .5em)) Basically SCSS allows me to concatenate a minus symbol - with a variable in order to convert it to a negative value. Is it possible to achieve this with CSS Variables? 回答1: Yes you can do it. Simply multiply by -1 : :root { --margin: 50px; } body { margin: 0 100px; border:1px

Is there a way to interpolate CSS variables with url()?

阅读更多关于 Is there a way to interpolate CSS variables with url()?

I want to store my background URLs in custom properties (CSS variables) and use them with the background property. However, I couldn't find a way to interpolate the string when using it as a parameter in url() . Here is my sample code: :root { --url: "https://download.unsplash.com/photo-1420708392410-3c593b80d416"; } body { background: url(var(--url)); } I know that this can be easily done in Sass or LESS using the interpolation function but I'm curious if there is a way to do it without any pre-processor. You can perform interpolation with most CSS functions, including rgba() (see an example

Access CSS variable from javascript [duplicate]

阅读更多关于 Access CSS variable from javascript [duplicate]

问题 This question already has an answer here: Accessing a CSS custom property (aka CSS variable) through JavaScript 3 answers Is there a way to access a css variable from javascript? Here my css variable declaration. :root{ --color-font-general:#336699; } 回答1: Just the standard way: Get the computed styles with getComputedStyle Use getPropertyValue to get the value of the desired property getComputedStyle(element).getPropertyValue('--color-font-general'); Example: var style = getComputedStyle

CSS scoped custom property ignored when used to calc var in outer scope

阅读更多关于 CSS scoped custom property ignored when used to calc var in outer scope

I'm attempting to scale size via var custom propertie in a way that the classes would compose without being coupled. The desired effect is that the 3 lists would be at 3 different scales but as demo'd on codepen all 3 lists are the same scale. I'm looking for an explanation of the scoping and a CSS custom property technique that could achieve this with composable loosely coupled code. :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

CSS scoped custom property ignored when used to calculate variable in outer scope

阅读更多关于 CSS scoped custom property ignored when used to calculate variable in outer scope

问题 I\'m attempting to scale size via a var custom property in a way that the classes would compose without being coupled. The desired effect is that the 3 lists would be at 3 different scales but as demonstrated on CodePen all 3 lists are the same scale. I\'m looking for an explanation of the scoping and a CSS custom property technique that could achieve this with composable loosely coupled code. :root { --size-1: calc(1 * var(--scale, 1) * 1rem); --size-2: calc(2 * var(--scale, 1) * 1rem); -