Pantheon Community

How are you compiling your Sass?

I’m curious what community members are using for Sass compilation?

Are you compiling locally and committing the result?
Pushing Sass only to GitHub/Bitbucket/Gitlab and letting CI do the rest?

1 Like

as 99% of my projects are not using an external build tool, I compile local, and push that compiled CSS up.

I use gulp to compile SCSS, with a few pre-processors mostly around flexbox compatibility.

I’m using Webpack Mix in my own starter theme, which is less of a chore to setup than straight webpack. But also Gulp is nice too. Ahmad Awais has a nice project on github called WP Gulp that is a great starting point for tooling around with your theme assets.

3 Likes

Agreed on the WP Gulp repo, it’s quite helpful for getting started. I compile locally, but should be using a CI build process. :stuck_out_tongue_closed_eyes:

I like a CI build process for consistency. I’ve seen projects where developers compile locally and, even with the same source code, the production CSS is different due to varying local versions of the tools used to compile.

Compiling on CI is also nice for the convenience of being able to edit a source file without needing to clone everything locally. For a quick fix on a project I don’t have cloned down I can make a change on GItHub/GitLab/etc. and submit a PR very quickly. If it is an open-source project this lower barrier to contribution encourages other contributors.

4 Likes

We use a mix of tools depending on the age of the codebase and the destination of the project. The best of the best though is compiled on CI deploy. We definitely have projects where the infrastructure is not advanced enough to allow that, so we commit the CSS, grumble, and curse when we have merge conflicts. We tend to have less issues with version compatibility though because our projects ship lock files for yarn and we use Lando to maintain Node versions of course!

My favorite setup for compiling sass is Laravel Mix for its simplicity and parity with my Laravel work. It’s built on webpack. I’ve been toying with going pure CSS in the future, especially as I am doing more Vue work.

3 Likes

We use Gulp locally, but I am hoping to move to more CI tooled workflow this year.

We also compile locally (grunt + compass) and commit the final CSS files.

We use Mix as well as the Sage (Roots) build system, depending on the project. Compiling always in the CI, never commit minified code unless it’s in a packaged plugin that is composer installed or something.

In the time since I started this thread I have started using CircleCI to compile the Sass for my Sage WordPress theme.

One Circle job runs the npm command and persists the dist directory which is ignored on Pantheon. The next Circle job pushes to Pantheon.

2 Likes

As most of my work is done by me alone, a local GULP process does the work, but I’m working towards CircleCI or BitBucket Pipelines doing it as well, after a merge request to master, later this year for all my active projects.

We use a base theme and create sub themes. Sass compilation is done locally, committed and pushed to multidev.

sass --watch scss:css

We’re keeping it simple.

1 Like

Looks like you’re using Sage… nice! What version?

Looks like I’m on 9. I didn’t dig too deep into Sage since my site is pretty minimal.