Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-69710

If SassC is used, core SCSS variables and Bootstrap includes can't be used in Boost's RAW SCSS.

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.8.5, 3.9.2
    • Fix Version/s: None
    • Component/s: Themes
    • Labels:
    • Affected Branches:
      MOODLE_38_STABLE, MOODLE_39_STABLE

      Description

      Prerequisites

      • As server admin, install SassC on your server
      • In config.php, configure the path to SassC, for example:

        $CFG->pathtosassc = '/bin/sassc';
        

      Problem 1: Core SCSS Variables are not passed to SassC

      Steps to reproduce:

      • Login as admin
      • Go to Site Administration -> Apperance -> Themes -> Boost -> "Advanced settings" tab
      • Set the theme_boost | scss setting to

        body {
            color: $gray !important;
        }
        

      • Click "Save changes"

      Expected result:

      • The RAW SCSS is stored and compiled and used
      • All body text is gray now

      Actual result:

      • The RAW SCSS is not accepted
      • There is a Debug message saying:

        Coding error detected, it must be fixed by a programmer: Error: Undefined variable: "$gray". on line 2 of stdin >> color: $gray !important; -----------^
        

      • The stack track is:

        Stack trace:
        line 138 of /lib/classes/scss.php: coding_exception thrown
        line 10934 of /lib/adminlib.php: call to core_scss->compile()
        line 2404 of /lib/adminlib.php: call to admin_setting_scsscode->validate()
        line 8499 of /lib/adminlib.php: call to admin_setting_configtext->write_setting()
        line 44 of /admin/settings.php: call to admin_write_settings()
        

      Problem 2: Bootstrap includes are not possible with SassC

      Steps to reproduce:

      • Login as admin
      • Go to Site Administration -> Apperance -> Themes -> Boost -> "Advanced settings" tab
      • Set the theme_boost | scss setting to

        @include media-breakpoint-down(md) {
            body {
                color: red !important;
            }
        }
        

      • Click "Save changes"

      Expected result:

      • The RAW SCSS is stored and compiled and used
      • On small screens, all body text is red now

      Actual result:

      • The RAW SCSS is not accepted
      • There is a Debug message saying:

        Coding error detected, it must be fixed by a programmer: Error: no mixin named media-breakpoint-down Backtrace: stdin:1 on line 1 of stdin >> @include media-breakpoint-down(md) { ---------^
        

      • The stack track is the same as with problem 1.

      Analysis

      • Both problems happen only if you configure Moodle to use SassC. If you use the Built-in SaSS compiler, everything is fine.
      • The problem only happens because the theme_boost | scss setting validates the configured RAW SCSS. This was introduced in MDL-56488. If you change the theme_boost | scss setting from admin_setting_scsscode to admin_setting_configtextarea in /theme/boost/settings.php, the RAW SCSS is accepted and properly processed anyway even if SassC is used. That's why I mark this issue as a regression of MDL-56488, knowing that this is not fully true.
      • This issue is related to MDL-62773 where Callum Booth described something similar for custom SCSS variables.

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              abias Alexander Bias
              Participants:
              Component watchers:
              Bas Brands
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated: