Using Sass with Pinegrow

I recently had someone ask whether Pinegrow supports Sass. Although it says right on their website that it does, I thought I’d go one step further and do a quick video demonstration.

In this demo, I’ll show you how we activate our Sass stylesheet and how we can use a simple Sass variable to change the color of a heading.

I’m Adam Lowe, President of Peak Performance Digital. If you find content like this helpful, I’d love it if you could give me a thumbs up and hit that subscribe button.

So, let’s get started.

Here we are inside Pinegrow. I’m going to start with a blank HTML project so you can see everything from start to finish. I’ll save this index.html file into a new directory, and I’ll tell Pinegrow to open that directory as a project.

On the project tab, you can see that we have our index.html file and a subdirectory called CSS with a style.css file inside it. I’ll open that style.css file so you can see that it’s currently blank.

Switching to our tree panel, you can see that the body of our index.html file is empty and that the header just has some of the basic stuff you need. It does, however, also have a link to that style.css file that was automatically created when we started the project.

I’ll click on the code editor here so you can see everything in that view as well. The only thing I’m going to do to this page is drop an H1 heading in here so we have something to target.

Now here is where the Sass magic happens. Over in our style panel is where we would typically go to do anything related to CSS. Like managing our stylesheets, adding classes, modifying attributes, etc. I’ll click this stylesheet dropdown to see what is linked to this page. Then I’ll click the dropdown next to the style.css we looked at before. All we have to do to use Sass in this project is select the “convert to scss” option.

Now, when we switch back to the project panel, you’ll see that we have a style.scss next to the style.css file. Our index.html file still links to style.css though, since this is what our Sass file will be compiled into.

Next, we’ll add a tiny bit of Sass magic and let Pinegrow’s Sass compiler do its thing. I’ll start by adding a Sass variable called $heading_color, and I’ll tell it that its value is red. Then, I’ll create a rule for our h1 element to set the text color to that variable.

As you can see, something has already happened because our heading is now red. Let’s change that variable to blue and see what happens. As expected, the text turns blue.

Okay, I know you are thinking to yourself, “can’t I just do that with CSS variables?” and you are right; you can. But this is supposed to be a simple demo, and I don’t want to trip you up with the complexities of Sass. I’d rather show you what’s happening and why it’s happening so you can understand the concept without getting buried in the details.

So let’s take a peek, shall we? I’ll leave our code window up with a tab on our style.scss file, which, remember, is our Sass source file. Then, I’ll open another tab with the style.css file, which is what is created by the Pinegrow Sass compiler. As you can see, the style.css file simply has the rule in a basic compiled form. I’ll change our variable in the scss file back to red, and you can see that the CSS file has also been updated. Simple.

Behind the scenes, Pinegrow is using Dart Sass, which is the primary reference implementation of Sass. It’s fast, it’s current, and it’s well-supported.

I want to thank Kevin Powell for one of his videos that I used as inspiration for this demo. If you don’t know who Kevin is, please crawl out from under the rock you have been hiding under and subscribe to his YouTube channel. He’s one of the best no-BS instructors out there, and I learn something new from him every time I watch his videos.

Kevin also has a new training coming out soon at beyondcss.dev. If it’s anything like his YouTube content, it’ll be worth every penny of whatever he plans to charge. I don’t have affiliate links or anything like that, I just know Kevin delivers the good stuff, and I have nothing but faith in him.

As always, if you found this video helpful, please like and subscribe or leave a comment down below, and I’ll see you next time.