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.
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
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.
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 { ... }
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
$bg-color
or$success
.--bg-color: $bg-color
:root { ... }
common/static/sass/_builtin-block-variables.scss
file intolms/static/base/variables.scss
andcms/static/sass/_base.scss