SCSS compile errors

Solved
Tourist
5 1 1

Hey there,

 

I'm quite new to shopify and also Sass, but I'm quite used to HTML/CSS. I'm fighting with compile issues on the SCSS (theme.scss.liquid).

 

The weird thing is when I finally get it going it's often enough to just change a 

border-width: 2px 0;

to something like

border-width: 2px;

to get a compile error. I wonder if something else is wrong with my syntax that causes this kind of instability in rendering.

 

Here's what the section looks that I'm working on. As soon as I remove it, everything works all the time, with the section in I sometimes get errors, sometimes not:

 

#shopify-section-1571506408528,
#shopify-section-1571832458777,
#shopify-section-1571834121077,
#shopify-section-1573506892550
{
	@include media-query($small) {
		border-style: solid;
	}

	@include media-query($medium-up) {
		padding: 0;
	}
}

#shopify-section-1571506408528 .page-width .grid,
#shopify-section-1571832458777 .page-width .grid,
#shopify-section-1571834121077 .page-width .grid,
#shopify-section-1573506892550 .page-width .grid
{
	@include media-query($medium-up) {
		padding: 55px 0;
		margin-left: 0;
		border-style: solid;
	}
}

#shopify-section-1571506408528 {
	@include media-query($small) {
		border-color: rgba(223, 230, 235, 1.00);
		border-width: 0 0 2px 0;
	}

	@include media-query($medium-up) {
		& .page-width .grid {
			border-color: rgba(223, 230, 235, 1.00);
			border-width: 0 0 2px 0;
		}
	}
}

#shopify-section-1571832458777 {
	@include media-query($small) {
		border-color: rgba(247, 110, 121, 1.00);
		border-width: 2px 0;
	}

	@include media-query($medium-up) {
    	& .page-width .grid {
			border-color: rgba(247, 110, 121, 1.00);
			border-width: 2px;
		}
	}
}

#shopify-section-1571834121077 { 
	@include media-query($small) {
		border-color: rgba(245, 148, 98, 1.00);
		border-width: 2px 0;
	}

	@include media-query($medium-up) {
		& .page-width .grid { 
			border-color: rgba(245, 148, 98, 1.00);
			border-width: 2px;
		}
	}
}

#shopify-section-1573506892550 {
	@include media-query($small) {
		border-color: rgba(78, 199, 175, 1.00);
		border-width: 2px 0;
	}

	@include media-query($medium-up) {
		& .page-width .grid {
			border-color: rgba(78, 199, 175, 1.00);
			border-width: 2px;
		}
	}
}

any help is appreciated.

 

Side question: is there a way to add custom classes to page elements?

0 Likes
Tourist
5 1 1

I now got it working again by removing some spaces and change them to tabs. Is the compiler really that sensitive? The rest of the original theme code looks rather messy. I wonder if my identations are the issue :-/ 

0 Likes
Tourist
5 1 1

It seems like it's breaking again just be recompiling after doing a single change on the css. I just changed some theme settings (actually only some footer link changes) and it broke again. It's really weird and I don't have a single clue of what's going on here.


Additional info: This is from the Debut theme which we modified.

0 Likes
Shopify Expert
665 170 199

Hi, @RealHelmi ,

This is Evita from On The Map.

 

You have to remove space between & and .page-width .grid, like this:

&.page-width .grid {}

 

Best, Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes

Success.

Tourist
5 1 1

Hi Evita,

 

thanks for replying. Actually this wasn't the issue and just works fine.

 

The issue was the non-ascii characters in the comments. I wouldn't believe this would still happen in 2019 but seems like Shopify's Sass compiler is sensitive to that. Removing those solved the problem.

1 Like