Expected Dbrace at line 65, col 3

[odiezbez]

I am getting the error
Expected Dbrace at line 65, col 3
Expected Dbrace at line 66, col 3
Expected Dbrace at line 67, col 3
Expected Dbrace at line 68, col 3
Expected Dbrace at line 69, col 3
for al of my info

.loader > i:nth-child(1) 
{
	--rz: 0deg;
	--delay: -4s;
	--tx: 2.336em;
	--ty: -1.548em;
	--hue: 0;
}

[PaulOB]

@odiezbez

–rz

If that’s supposed to be a css custom variable then it should start with 2 dashes.

--rz:

Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN

[rpg_digital]

@PaulOB

If that’s supposed to be a css custom variable then it should start with 2 dashes.

@PaulOB, I just formatted odiezbez’s code with the </> button and it appears they were double dashes. That or they have been cleverly converted from a single dash.

[PaulOB]

@rpg_digital

I just formatted odiezbez’s code with the </> button and it appears they were double dashes

Thanks I missed that

@odiezbez

I am getting the error

I think we need to see where you are using these values.

Run the css through the w3c css validator to check for errors rather than relying on your editors own error checking.

[odiezbez]

I did run this code in a few css fixers, and they all give me this error " Expected ARBRACE at line65col3

Here is my code,

.loader, .loader:before, .loader:after
	{
		box-sizing: border-box;
		margin: 0 auto;
		padding: 0;
	}
body
	{	
		align-items: center;
		background-color: #f2f2f7;
		display: grid;
		min-height: 100vh;
			
	}
.loader 
	{
		animation: loaderSpin 16s infinite linear;
		background-color: #f2f2f7;
		filter: blur(0.2em) contrast(2);
		height: 21em;
		position: relative;
		width: 21em;
	}
@keyframes loaderSpin 
	{
		to 
			{
				transform: rotate(360deg);
			}
	}
.loader > i 
	{	
		animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
		background-color: #ef8f8f;
		border-radius: 50%;
		height: 1em;
		left: 10em;
		position: absolute;
		transform: rotateZ(var(--rz, 0)) translateY(5em);
		top: 10em;
		width: 1em;
	}

@keyframes iMove 
	{
		0% 
			{
				transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(0);
			}
		2% 
			{
				transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
			}
		20% 
			{
				transform: rotateZ(var(--rz, 0)) translateY(4em) translate(0, 0) scale(1.25);
			}
		90%, 100% 
			{
				transform: rotateZ(var(--rz, 0)) translateY(4em) translate(var(--tx, 0), var(--ty, 0)) scale(0);
			}
	}
.loader > i:nth-child(1) 
	{
		--rz: 0deg;
		--delay: -4s;
		--tx: 2.336em;
		--ty: -1.548em;
		--hue: 0;
	}
same code till 71

and my code I use in html

<div class="loader">
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
  <i></i><i></i><i></i><i></i><i></i><i></i>
</di

[Gandalf]

@odiezbez

line65col3

And which line is line 65?

[PaulOB]

There is no error in that code as far as I can see.

The error message you are getting is not from the w3c CSS online validator (the only one that really matters) and I guess you are using one of the free code beautifiers/validators which are not maintained to current specs.and probably don’t understand custom variables.

Unfortunately the w3c css validator is offline at the moment so I can’t share a screenshot of the results. However if you open your devtools in Chrome and inspect the css you would see any invalid properties crossed out and there are none in that snippet of code.

Is the resulting code not working for you?

[odiezbez]

@odiezbez

.loader > i:nth-child(1) 
	{
		*--rz: 0deg;*
		--delay: -4s;
		--tx: 2.336em;
		--ty: -1.548em;
		--hue: 0;
	}

this is the place of line 65

It does not show all the colors and is only showing one color\

[PaulOB]

@odiezbez

*--rz: 0deg;*

There’s nothing wrong with that as such.

@odiezbez

It does not show all the colors and is only showing one color\

Where are you defining the colors? You define the hue variable but don’t use it. Perhaps you meant to use it in hsl colors and change for each keyframe.

e.g.

(I only added the extra rule for the second i element.)

Is it possible you could post a demo on codepen or similar so I can see it all in place

[odiezbez]

https://codepen.io/hendrik-bezuidenhout/pen/rNrQmmQ
I did try using this from an other codpen, but they arer using sccs, and I did convert from sccs to css, I may have done sothing wrong. Here is the origunal code. https://codepen.io/amit_sheen/pen/JjBLaGG

[PaulOB]

Yes as I suspected you missed out the hsl hue value which the original had in place here instead of : #ef8f8f;.

.loader > i 
	{	
		animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
		/*background-color: #ef8f8f;*/
               background-color: hsl(var(--hue, 0), 75%, 75%);
etc...

It’s the hue variable that changes in every keyframe to get the different shades of color.

Change your background to hsl as above.

[odiezbez]

@PaulOB

.loader > i 
	{	
		animation: iMove 4s var(--delay, 0s) infinite ease-in-out;
		/*background-color: #ef8f8f;*/
               background-color: hsl(var(--hue, 0), 75%, 75%);
etc...

Thank you for clearifying this, it is working now