Add Sass to Pegasus - #46558

I think we'll want to integrate this into our build process. @davidsbailey, @tim-dot-org, @breville, any quick pointers on how/where to do this? If not, I'll dig into it with Kelby.

Add Sass to Pegasus for quicker and better CSS-ing.

To Use

1. Compile .scss files into .css files by running the command below in your feature branch:
   sass --watch pegasus/sites.v3/code.org/public/sass:pegasus/sites.v3/code.org/public/css

I think you will need to decide if you want the .css files to be checked into the repo. the way you have it now, it seems like they would have to be, in which case it would be on the developer to rerun the sass command every time they update a .scss file. this does not seem ideal.

if you used a subdirectory like pegasus/sites.v3/code.org/public/css/generated, then you could add that directory to .gitignore and generate the css files on every build. if you go this route, I would suggest using a rake task that gets invoked as part of rake build, maybe here:

2. Create a .scss file in pegasus/sites.v3/code.org/public/sass >> sass-test.scss
3. Do all your stylin' in the .scss file
4. Link to the .css file; ex: <link rel="stylesheet" href="https://github.com/css/sass-test.css">

I'm not sure any of steps 2-4 need to be integrated into the build process.

Notes

• Installed Dart Sass using brew install sass/sass/sass

the packages installed by brew should be added to our setup instructions. it would be nice if you can find a package on linux that will work for people who use that OS as a development environment, to be installed with sudo apt-get install.

Thanks @davidsbailey! I'll look into this w/ @jamescodeorg next week.

I think the ideal workflow would be that we simply render the sass file when the equivalent .css is requested. That's how we already handle .scss files in /shared/css, which can in fact be used by pegasus, as demonstrated in #27354.

I think the ideal workflow would be that we simply render the sass file when the equivalent .css is requested. That's how we already handle .scss files in /shared/css, which can in fact be used by pegasus, as demonstrated in #27354.

Thanks Brendan! This sounds great to me.

@breville does this mean if I want to use sass in pegasus I can just make a .scss file in the /shared/css folder, and this PR is irrelevant and can be deleted? cc @jamescodeorg

@breville does this mean if I want to use sass in pegasus I can just make a .scss file in the /shared/css folder, and this PR is irrelevant and can be deleted? cc @jamescodeorg

I believe you can still use this functionality, yes.

That said, for a long time we have liked the idea of supporting sass in pegasus proper, which would also mean we could convert a lot of its existing .css files, so I think there is still value in pursuing that support.

@breville Thanks for the info, this sounds like a better approach. Do you know off-hand how this works for the .scss files in /shared? (If not, I can dig around.)

@breville Thanks for the info, this sounds like a better approach. Do you know off-hand how this works for the .scss files in /shared? (If not, I can dig around.)

I don't know a ton, but would start here, which dates all the way back to here.

Thanks for all the pointers and work here, I've created a new PR with the change to enable sass for pegasus using the same approach as /shared. I think we can close this PR unless you'd like to keep the test files?

Thanks for all the pointers and work here, I've created a new PR with the change to enable sass for pegasus using the same approach as /shared. I think we can close this PR unless you'd like to keep the test files?

No need to keep the test files, I'll close this PR. And I second the thanks to everyone big time!