Jump to content

How to compile this SCSS to work in Squarespace

Recommended Posts

  • Replies 5
  • Views 809
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Just tested & it worked here

image.thumb.png.70cebe24fab37bd7e2a510b264eee822.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

 

Link to comment

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>

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.