css How to compile this SCSS to work in Squarespace

Site URL: https://codepen.io/thebabydino/pen/YzppPmm

Hi, I'm trying to convert a code pen SCSS to CSS to use in my Squarespace custom code.

Here is the Codepen link

https://codepen.io/thebabydino/pen/YzppPmm

Code Pen has an option to convert SCSS to CSS, but their converted CSS still does not work in Squarespace.

Does anyone know what is happening?

Just tested & it worked here

Add to Code Block

<img src='https://images.unsplash.com/photo-1603976246669-17d36a4ebd28?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MXwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHw&ixlib=rb-1.2.1&q=80&w=900' alt='cats'>
  <style>
    @property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}
img {
  --k: 0;
  --j: calc(1 - var(--k));
  --list: transparent calc(50% - 4vmin), red 0 calc(50% + 4vmin), transparent 0;
  place-self: center;
  -o-object-fit: cover;
     object-fit: cover;
  width: 40vmin;
  height: 40vmin;
  filter: grayScale(var(--j));
  --mask:
  	radial-gradient(closest-side, red calc(50% - 1px), transparent 50%),
  	radial-gradient(closest-side,
  		transparent calc(50% - 25% + var(--k)*2*25% - 1px),
  		red calc(50% - 25% + var(--k)*2*25%) calc(var(--k)*100% + var(--j)*50% - 1px),
  		transparent calc(var(--k)*100% + var(--j)*50%)),
  	linear-gradient(var(--list)),
  	linear-gradient(90deg, var(--list)),
  	linear-gradient(45deg, var(--list)),
  	linear-gradient(-45deg, var(--list));
  -webkit-mask: var(--mask);
          mask: var(--mask);
  -webkit-mask-composite: source-over, source-in, source-over, source-over, xor;
          mask-composite: add, intersect, add, add;
  transition: --k 0.2s ease-out;
}
img:hover {
  --k: 1 ;
}
  </style>

Hi Tuan

I was adding the code  to my custom CSS code. without style tags and instead of img using .image-block.

Your whole code above, added to code block works works for me too. 

but, do you know why it does now work when added to custom CSS? The syntax error is on line on so its for this property definition

@property --k {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

is there a better way to define these variables in custom CSS?

thanks so much Tuan!

Also, it works when added to advanced page header injection. 

I'm excited to have discovered this new @ property CSS. It's part of the CSS Houdini Api. Are you familiar with it? Have you used it for anything?

One More Note 🙂

I figured out you can define @property  in the advanced settings code injections like below. But adding the rest of the code to Custom CSS section still does not work.  I still have to add rest of the code wrapped in <style> tags either in page advanced header injection or inline in the code block.

<script>

CSS.registerProperty({

name: "--k", syntax: "<number>", inherits: false, initialValue: "0"

});

</script>

On 4/14/2022 at 11:56 PM, sanfranciscosasha said:

One More Note 🙂

 

I figured out you can define @property  in the advanced settings code injections like below. But adding the rest of the code to Custom CSS section still does not work.  I still have to add rest of the code wrapped in <style> tags either in page advanced header injection or inline in the code block.

<script>

CSS.registerProperty({

name: "--k", syntax: "<number>", inherits: false, initialValue: "0"

});

</script>

Hi,

I don't know this. You try posting to Squarespace Customization Resource Group on Facebook