All geek questions in one place

Iterate over topic variable files in SCSS

I want to create different css themes for a WordPress theme using theme customization files. Installation (simplified) will be as follows:

/themes/_theme1.scss /themes/_theme2.scss /components/_file1.scss /components/_file2.scss /theme.scss

The idea is to enable light themes by adding a class to the body of the document, such as .theme-theme1 or .theme-theme2 . In the _theme#.scss I want to define variables such as text color, font size, etc. _file#.scss defines the actual styles.

Now my question is how to iterate through the theme settings files when filling out the files. scss.

Example idea, background color:

 body { ###foreach themefile### &.theme# { background-color: $background-color; } ###/foreach### }

I know how to do this, and only one theme is available in the resulting CSS file, but I want to make ALL themes available in the resulting CSS. Feel free to ask for more details, as I'm not sure if I will explain correctly.

Is there a way to create this stylesheet through some foreach loops through variables in the theme files, or is it necessary to do this using additional scss rules for each theme file?

0
source share
1 answer

This is somewhat possible using the @import combo with @mixin to create styles. This method should produce minimal duplicate code.

Here we will configure the files.

 - scss - themes - _theme1.scss - _theme2.scss - _theme.scss - styles.scss

The _ prefix on some files does not allow them to be compiled into CSS, so that our assembly is clean and clean. Now open the contents of the files:

_theme1.scss

 $theme-name: 'theme1'; $primary-color: red; $primary-font-size: 24px;

_theme2.scss

 $theme-name: 'theme2'; $primary-color: blue; $primary-font-size: 12px;

This is a simplified example, but should give a basic idea. Each theme file will contain only variables.

_theme.scss

 @mixin themestyle() { body.#{$theme-name} { p { color: $primary-color; font-size: $primary-font-size; } .bordered { border: 3px solid $primary-color; } } }

The themestyle themestyle will contain all the styles for each theme, using the variables from the /themes/_theme*.scss files. body.#{$theme-name} will create a selector of type body.theme1 or body.theme2 , depending on the current value of the $theme-name variable.

In this demo, I style with the p tag, but this can easily be extended to all elements / selectors for your site. It is important to remember that all styles must be inside the body.#{$theme-name} selector.

Now the last, and smallest DRY part. The styles.scss file will import each theme file and then call themestyle mixin to create styles for each theme.

styles.scss

 @import 'themes/theme'; /* Theme 1 Styles */ @import 'themes/theme1'; @include themestyles(); /* Theme 2 Styles */ @import 'themes/theme2'; @include themestyles();

Repeatable @import/@include is required because it cannot @import inside a loop or mixin, or it can be optimized a bit more.

After compiling styles.scss output will be:

 /* Theme 1 Styles */ body.theme1 p { color: red; font-size: 24px; } body.theme1 .bordered { border: 3px solid red; } /* Theme 2 Styles */ body.theme2 p { color: blue; font-size: 12px; } body.theme2 .bordered { border: 3px solid blue; }

Now you can implement these themes by adding a class to the body tag, for example, <body class="theme1"> or <body class="theme1"> .

Here's a Cloud9 project showing the setup.

+2
source

Source: https://habr.com/ru/post/1272070/

More articles:


All Articles