Comments on: A Complete Guide to Custom Properties https://css-tricks.com/a-complete-guide-to-custom-properties/ Tips, Tricks, and Techniques on using Cascading Style Sheets. Thu, 23 May 2024 20:06:17 +0000 hourly 1 https://wordpress.org/?v=6.5.5 By: Dean https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1802919 Sat, 11 Feb 2023 11:31:37 +0000 https://css-tricks.com/?p=333595#comment-1802919 In reply to Serkan.

A bit late but will likely still be useful, Chatgpt can do what I believe is what you’re after.

I inputted some css from my website I’m currently working on, albeit only 100 lines long, and it nearly perfectly modified the css adding the use of custom properties for all entries. I did have to make some tweaks but the bulk of it was automagically done for me.

]]>
By: Serkan https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1797938 Sun, 04 Dec 2022 23:42:55 +0000 https://css-tricks.com/?p=333595#comment-1797938 Hi,

there are some converters out there helped me to transition from CSS to LESS to SCSS. They mostly offer the opportunity to scan for common properties and create variables from this.

Now I want to go back to Vanilla CSS with Custom Properties. I look for a script or another solution to input a compiled CSS (or the original SCSS/LESS file) and it converts the CSS to a Version that uses custom properties.

So that input.css

body {color: red; background: black;}
body a {color: black; background: green;}

or input.scss

$black = #000;
$red = #f00;
$green = #0f0;
body {color: $red; background: $black;
  a {
    color: $black; background: $green;}
}

would be converted to a output.css

:root {
  --color-black: #000;
  --color-red: #f00;
  --color-green: #0f0;
}

body {
  color: var(--color-red);
  background: var(--color-black);
}
body a {
  color: var(--color-black);
  background: var(--color-green);
}

I found a lot of Converters that do the opposite (e.g. PostCSS for converting Custom Properties to static “CSS3” Style CSS), but not the other way around.

I only found one article that points into this direction: https://codepen.io/jakealbaugh/post/css4-variables-and-sass

And this discussion focuses on a SASS solution: Create CSS custom properties from SCSS variables.

So now I turn to my last resort, CSS tricks. Does anyone out there know a automatic or semi-automatic conversion script?

]]>
By: Geoff Graham https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1786107 Tue, 23 Nov 2021 16:36:45 +0000 https://css-tricks.com/?p=333595#comment-1786107 In reply to Laurent.

Nice, thanks for the heads up!

]]>
By: Laurent https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1786105 Tue, 23 Nov 2021 16:31:24 +0000 https://css-tricks.com/?p=333595#comment-1786105 Pretty neat post !

Just one small mistake. The example given for Sass variable and custom property doesn’t work anymore. That used to be correct, but now it should be:
$brandColor: red;
body {
--brandColor: #{$brandColor};
}

More details about this here https://github.com/sass/libsass/issues/2621

]]>
By: Jana https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771954 Wed, 12 May 2021 08:42:21 +0000 https://css-tricks.com/?p=333595#comment-1771954 Thank you for this nice guide, you are a lifesaver :)

]]>
By: Jonathan https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771317 Wed, 28 Apr 2021 10:20:03 +0000 https://css-tricks.com/?p=333595#comment-1771317 Great article, but there’s one pretty big thing missing: You can’t use custom properties for media queries. So this won’t work:

:root {
 --tablet: 40em;
}

@media (max-width: --tablet){
 body {
  padding: 0.5rem;
 }
}

That’s not a bug, but probably neccessary to prevent infinite loops, when you would e.g. change the value of –tablet inside the media query.

But you can use SASS variables for media query breakpoints, and since this is still a very common und useful thing, the comparison between SASS and CSS variables probably should mention this.
So this is works fine, since $tablet is replaced with 40em when compiling to css:

$tablet: 40em;


@media (max-width: $tablet){
 body {
  padding: 0.5rem;
 }
}
]]>
By: Temani Afif https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771303 Tue, 27 Apr 2021 20:28:24 +0000 https://css-tricks.com/?p=333595#comment-1771303 Great article!

I would probably add few notes around the use of CSS variables inside :root and the common mistake of evaluating variable there.
Ex:

:root {
  --r:0;
  --g:0;
  --b:255;
  --color:rgb(var(--r),var(--g),var(--b))
}

Then we try to change the --color by adjusting the other variables (ex: .container {--r:255;} which won’t work.
A related SO question: https://stackoverflow.com/a/52015817/8620333 (such question come back quite often)
TL;DR: we should always avoid evaluation inside :root if we aim to change the variable within different elements.

Another note about “cyclic dependencies” would be helpful too since it’s also a common mistake trying to do the following --p:calc(var(--p) + 1px) thinking that we can increment the variable which is invalid.


A last note (not a very important one): Even if we should name them correctly, it’s good to know that they can have some uncommon syntaxes. We can for example use only the two dashes --:red. Not a good practise of course, but good to know. (related: CSS variables can have strange syntaxes )

]]>
By: Mads Stoumann https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771300 Tue, 27 Apr 2021 19:02:54 +0000 https://css-tricks.com/?p=333595#comment-1771300 In reply to Patrick.

Great compilation, lots of tips and tricks!
Small suggestion: replace “mousemove” with “pointermove” in the JavaScript-example to also include touch-devices.

]]>
By: Ian McNair https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771298 Tue, 27 Apr 2021 18:17:26 +0000 https://css-tricks.com/?p=333595#comment-1771298 One useful thing you can do with preprocessor variables and custom properties is automatically turn a color into a bunch of custom properties for its red/green/blue/hue/saturation/lightness/opacity:

.module {
    $backgroundColor: #ff0000;
    --background-color: #{$backgroundColor};
    --background-color-hue: #{hue($backgroundColor)};
    --background-color-saturation: #{saturation($backgroundColor)};
    --background-color-lightness: #{lightness($backgroundColor)};
    --background-color-opacity: #{opacity($backgroundColor)};
    // ...and so on
}

(also, in my experience, you have to explicitly echo sass stuff when you use it in a custom property or it will just treat it like a string)

And then if you want you can just define a list of simple colors as sass variables, but then you can also make variant colors easily. Like your complementary color example: --complement: hsla(calc(var(--background-color-hue) + 180deg), var(--background-color-saturation), var(--background-color-lightness), var(--background-color-opacity));. I’ve got a mixin in my projects that takes a map of colors/property names and breaks them apart like this.

]]>
By: Blallo https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771295 Tue, 27 Apr 2021 17:36:58 +0000 https://css-tricks.com/?p=333595#comment-1771295 I always see css vars as “API”s for HTML and web component. Easy to use, easy to modify via JS, even exposes stuff from a component. They are a bless inside my angular project at $JOB.

That grid trickery is so interesting tho.

]]>
By: Patrick https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771294 Tue, 27 Apr 2021 15:15:44 +0000 https://css-tricks.com/?p=333595#comment-1771294 Thank you Chris and Miriam for writing this very thorough guide.

One thing I’d add is that there are some useful features in DevTools nowadays to also help with custom properties.

In Edge and Chrome for example, you can click var() functions to jump directly to where the property used in that function is defined.

All DevTools also provide the computed value as a tooltip on hover.

]]>
By: Tobias Buschor https://css-tricks.com/a-complete-guide-to-custom-properties/#comment-1771293 Tue, 27 Apr 2021 15:14:51 +0000 https://css-tricks.com/?p=333595#comment-1771293 I have made a polyfill for IE11 and find it very convenient to simply load a script despite the implications of the polyfill. In most cases it works quite well.

https://github.com/nuxodin/ie11CustomProperties

]]>