css-variables

Why does the Cascade for CSS Custom Properties Not Work? [duplicate]

由 跟風遠走 提交于 2019-12-24 04:53:11
问题 This question already has an answer here : CSS scoped custom property ignored when used to calculate variable in outer scope (1 answer) Closed last year . I have a full working CodePen here showing the problem. I'm using CSS custom properties like so: :root { --global-primary-colour-hue: 211; --global-primary-colour-saturation: 100%; --global-primary-colour-lightness: 50%; --global-primary-colour-opacity: 1; --global-primary-colour: hsla( var(--global-primary-colour-hue), var(--global-primary

How to force integer in CSS Variable?

由 Deadly 提交于 2019-12-23 03:14:28
问题 Forgive me if this is simple question, but I am fighting with this on CodePen and have no clue what's going on. I have in code: :root { --ile: 10; } @for $i from 0 to (var(--ile)) { } The problem is Codepen claims var(--ile) is not an integer (huh?) even if obviously it is (it has no unit and because it is not 10.0 it cannot be a float). What Am I missing? I tried to look in CSS specs and various examples on the web and using number as variable is legit so how to force conversion to integer

CSS custom properties polyfill for ie11

由 二次信任 提交于 2019-12-21 07:11:43
问题 Is there a way to pollyfill a custom CSS property for ie11 with JavaScript? I was thinking on load, check if browser supports custom properties and if not do some kind of find and replace on the properties. Is this possible with JavaScript or some library? Thanks 回答1: You didn't mention how you're bundling your JavaScript, but yes, it's possible. For example, PostCSS has a plugin, which polyfills this feature. The usage depends on how you're bundling your script files. With Webpack, for

Using CSS Variables (custom properties) in a Pseudo-element's “content:” Property

由 旧城冷巷雨未停 提交于 2019-12-18 11:32:29
问题 Example use (what I want) div::after { content: var(--mouse-x) ' / ' var(--mouse-y); } Test case showing it NOT working: CodePen: CSS Variables in Pseudo Element's "content:" Property (a test case) by Jase Smith document.addEventListener('mousemove', (e) => { document.documentElement.style.setProperty('--mouse-x', e.clientX) document.documentElement.style.setProperty('--mouse-y', e.clientY) // output for explanation text document.querySelector('.x').innerHTML = e.clientX document

How do I apply opacity to a CSS color variable?

由 此生再无相见时 提交于 2019-12-17 03:59:32
问题 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 some opacity applied: #element { background: (somehow use var(--color) at some opacity); } How would I go about doing this? I am not using any preprocesser, only CSS. I would prefer an all-CSS answer, but I will accept JavaScript/jQuery. I cannot use opacity because I am using a background image that

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

由 余生长醉 提交于 2019-12-17 03:17:41
问题 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

How can I define colors as variables in CSS?

由 一曲冷凌霜 提交于 2019-12-17 02:55:18
问题 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. 回答1: CSS supports this natively with CSS Variables. Example CSS file :root { --main-color:#06c; } #foo { color: var(--main-color); } For a working example,

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

由 蓝咒 提交于 2019-12-17 02:49:13
问题 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

Custom CSS attributes for Angular components

由 旧时模样 提交于 2019-12-14 03:57:15
问题 I have an Angular component that encapsulates a picture carousel. If uses the :host selector to make itself a flexbox and ngFor to repeat an img tag for each picture in an array of pictures passed in to it through an @Input property. I have two, related problems. 1) I want to allow the pictures to be styled to a fixed height or width. 2) I want to set the margin-right and margin-bottom on the imgs to allow spacing the pictures. The tricky part is that I want these settings to be determined in

Inverting colors with CSS Variables

由 廉价感情. 提交于 2019-12-13 18:33:59
问题 I want to create a local inverted theme (modern browsers). Color shades are set using CSS Vars (CSS custom properties). Some elements have more contrast, others are low contrast. Now the inverted container has a black background. Everything within there, should be reversed. Dark grey should be light grey. Light grey should be dark grey. My goal is to achieve this without reassigning the vars in CSS selectors. For this example it would be easy, but the actual code base is big and there are
订阅 css-variables