Themes dev: custom scss variables vs body class attributes

Themes dev: custom scss variables vs body class attributes

by Jean-Roch Meurisse -
Number of replies: 4
Picture of Core developers Picture of Plugin developers Picture of Testers

Having a look at boost_campus theme, I noticed that they use a particular method to add functionality to the theme, i.e adding scss variables according to theme settings (loaded throug get_pre_scss function) and defining conditional scss rules related to these variables representing theme settings. ex:

@if variable-exists(section0title) {
    @if $section0title == 'yes' {
        body.path-course-view #section-0 h3.accesshide {
            position: inherit;
            left: inherit;
            font-weight: $headings-font-weight;
            font-size: $h3-font-size;
            width: initial;
            height: initial;
            clip-path: none;
        }
    }
}

Are there advantages over adding body classes from the layout file? Performance maybe?

Thanks in advance

Average of ratings: -
In reply to Jean-Roch Meurisse

Re: Themes dev: custom scss variables vs body class attributes

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

That's not adding classes to the layout file but the 'all' / 'all-rtl' generated file when the variable 'section0title' exists and set to 'yes'.  If both are not true then 'all' / 'all-rtl' will be smaller -> therefore everything that implies.

Average of ratings: -
In reply to Gareth J Barnard

Re: Themes dev: custom scss variables vs body class attributes

by Jean-Roch Meurisse -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thanks for answer Gareth !

I think my post was not clear enough. I wanted advice/opinions on good or best practice among two choices that work:

  • Using conditions in scss files about rules added through get_pre_scss function
  • Adding classes to body tag according to get_config calls

The second approach is (I think) more widely used but don't know if there is an official best practice.

Cheers


Average of ratings: -
In reply to Jean-Roch Meurisse

Re: Themes dev: custom scss variables vs body class attributes

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Jean-Roch,

But your example uses both in the single solution and thus not an 'or' bit of question logic.  It appears to be setting an SCSS variable based upon an implied get_config call (or interrogation of theme object) and then using conditions in SCSS to decide if to add a body class based upon that very SCSS variable.

G

Average of ratings: -
In reply to Gareth J Barnard

Re: Themes dev: custom scss variables vs body class attributes

by Jean-Roch Meurisse -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Gareth,

Thanks again for following wink

In the very example of "section0title" the all / all-rtl generated files get an extra rule if the theme config variable "section0title" is set to yes. This variable adds a scss variable through the $configurable array in lib.php theme_boost_campus_get_pre_scss. 
This way, there is no related extra class added to the body tag (and thus no get_config call in layout file).

I think that this method is (very) slightly more efficient since all/all-rlt files are cached and there is less code in layout files. Am I right?

Thanks a lot

Average of ratings: -