Dropping Sass support from builtin annotatable block

[farhan]

Dropping Sass support from builtin annotatable block

Tickets: #35570

Tasks:

• Convert Sass variable into css variables

• Compile the css file of the block following given steps.

  • Change this line to the following to avoid adding comments in the compiled css files

         source_comments: int = SASS_COMMENTS_NONE

  • Compile the sass to uncompressed CSS using following command

          npm run compile-sass-dev

  • Copy the compiled XBlock linked CSS (lms/static/css/*Display.css and lms/static/css/*Editor.css) into xmodule/static/css-builtin-blocks.
  • Format the CSS files using the editor.
  • Add those CSS files to version control.

• Replace add_sass_to_fragment to add_css_to_fragment in blocks .py file

• Remove all .scss files linked to the block under xmodule/assets.

  • Make sure to remove the .scss file in a separate alone commit so reviewer could review scss changes and they stay in history.
  • Don't remove the scss file if its linked to some other block.

Testing Notes:

• Run npm run build to run webpack and compile sass files.
• Run ./manage.py lms collectstatic in lms shell to re-collect static files.
• Run ./manage.py cms collectstatic in cms shell to re-collect static files.
• Verify the block's compiled css and the css global variables in the LMS
• Verify the block's compiled css and the css global variables in the Studio
• Test the XBlock rendering and User Experience in LMS
• Test the XBlock rendering and User Experience in Studio

Reference PR:

Here is initial reference PR [Some the changes are only 1 time changes so don't need them in next block PR's.]