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

Theme Boost: Issues with SCSS variables

    XMLWordPrintable

    Details

    • Type: Bug
    • Status: Open
    • Priority: Minor
    • Resolution: Unresolved
    • Affects Version/s: 3.2
    • Fix Version/s: None
    • Component/s: HTML and CSS, Themes
    • Labels:
      None
    • Affected Branches:
      MOODLE_32_STABLE

      Description

      Hi,

      as we are working on a own child theme for Boost, we encountered following two problems concerning SCSS variables:

      1. admin_setting_configcheckbox with default values are not written to SCSS file
      If you create a checkbox admin setting with its default values (no = '0', yes = '1'), and write it to the function

      lib.php:
      function theme_xy_get_pre_scss($theme) { 
      global $CFG; 
      $scss = ''; 
      $configurable = [ 
          // Config key => [variableName, ...]. 
          'brandcolor' => ['brand-primary'], 
          'checkboxvariable' => ['checkboxvariable'],
      

      this value will NOT be processed to the SCSS file.

      This is because of the statement if (!empty($value)) in the following code within the same function:

      function theme_xy_get_pre_scss($theme) in lib.php:
       
       // Prepend variables first.
       foreach ($configurable as $configkey => $targets) {
          $value = isset($theme->settings->{$configkey}) ? $theme->settings->{$configkey} : null;
           if (empty($value)) {
              continue;
          } ...
      

      Values with 0 as int or string will also return true in the emtpy() function and therefore the processing will be skipped.

      This breaks the SCSS if a user checks on

      post.scss:
       
      @if $variable == 0 / 1
      

      because this variable simply does not exist in this case.

      A solution in core could be to check on

      function theme_xy_get_pre_scss($theme) in lib.php
       
      if (!isset($value)).
      

      instead of doing the check with the empty()-function.

      2. Updating theme with new settings that write variables to SCSS breaks the SCSS during the database update process When you install a new version of a theme containing new settings that are transferred to SCSS variables (similar to $brand-primary), the update wizard requests to update your database. Doing this will also clear the cache and the SCSS will be built from scratch. In this SCSS file the code in which the new variables will be checked is already there. However, those variables are not yet written to the file because in that moment the setting does not yet exist. This leads to the error message that the used variable is not defined and breaks the whole SCSS. A workaround for the moment is to additionally check if the variable exists at all in the SCSS:

       post.scss:
       
      @if variable-exists(variable)
      

      Nevertheless, I wanted to hint to this problem and it would be great if this could somehow be fixed in core.

      Best regards, Kathrin

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              Unassigned Unassigned
              Reporter:
              kosswa Kathrin Osswald
              Participants:
              Component watchers:
              Amy Groshek, David Scotson, Amaia Anabitarte, Carlos Escobedo, Ferran Recio, Ilya Tregubov, Sara Arjona (@sarjona), Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

                Dates

                Created:
                Updated: