Expose builtin block Sass variables as CSS variables

[kdmccormick]

Goal

As a prerequisite to extracting the blocks into their own repo, we need to decouple the built-in XBlocks from edx-platform's Sass build. We can achieve this by exposing the blocks' Sass vars into CSS vars.

Background

Currently, the built-in XBlocks are styled by .scss (aka Sass) files in ./xmodule/assets. Each Sass file is applied to its corresponding block using the xmodule.util.builtin_assets.add_sass_to_fragment function (PollBlock example). These XBlock Sass files are compiled as part of ./scripts/compile_sass.sh, which is executed as part of npm run build.

Each builtin block's Sass file references several Sass variables (for example, $bg-color). These variables can be customized by comprehensive themes. Here is an example of how tutor-indigo customizes the variables.

These Sass variables need to keep working when the blocks are extracted, but we cannot actually use the Sass variables in the extracted blocks.

Approach

1. Record a list of every Sass variable used by builtin block Sass.
   • The builtin block Sass files are all located under xmodule/assets.
   • A Sass variable is indicated with a dollar sign, for example $bg-color or $success.
2. Create a new Sass module common/static/sass/_builtin-block-variables.scss
   • This module will generate a corresponding CSS variable for every Sass variable that the builtin blocks need. Build it using the list you recorded above.
   • For example: --bg-color: $bg-color
   • To make the variables, wrap them all in one big :root { ... }
   • (CSS var reference on MDN)
3. Include the new common/static/sass/_builtin-block-variables.scss file into lms/static/base/variables.scss and cms/static/sass/_base.scss

[farhan]

@kdmccormick I have moved point 4 to this new issue, please remove it from this story