How to change $primary in 4th bootstrap depending on page id?

A

acaxapo2019-01-07 20:34:38

Sass

acaxapo, 2019-01-07 20:34:38

The approximate structure of a project built with gulp, sass and bootstrap-4 is as follows:

site
     libs
          bootstrap
               ...
               _variables.scss
     sass
          _libs.sass (здесь подключен бутстрап-4)
          _vars.sass (здесь переопределяются стили бутстрапа)
          main.sass (сюда подключены _libs.sass и _vars.sass и добавлены свои стили)
     green.html
     index.html
     red.html
     ....html
gulpfile.js
package.json

Changing the corporate color of the elements of the entire site, for example, to red, is as easy as shelling pears: write "$primary: red" in the _vars.sass file.
But how to change $primary depending on page id added to body ?
For example, if we write in the red.html file , then in the _vars.sass file we write $primary: red, and if we write in the green.html file , then in the _vars.sass file we write $primary: green. How to write such conditions in the _vars.sass file? Even more: how to set several individual styles for different id (for example, for red - red elements and buttons with roundings of 1rem, and for green - green elements, buttons without roundings, other indents, etc.)? When writing:<body id="red-page"></body><body id="green-page"></body>

#red-page
     $primary: red

gulp throws an error
Thank you in advance.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Sergey delphinpro, 2019-01-07
@acaxapo

You make several files: main-default.scss, main-red.scss, etc.
In each write something like the following

$primary: red;
@import 'vars.scss';
…

Then it's a matter of technology - on each page you connect your file.
The obvious drawback is that there are too many duplicate styles in the output. But on the other hand, only one of the main files is included, and this is the simplest solution that does not require intervention in the bootstrap source.
Another option is to rip out all the styles that affect the color scheme and include main.css + the color scheme. Sub-options are possible here - separate files for themes, one file through the root selector. In any case, here you will already have to interfere with the source codes or duplicate part of the source codes in your topics.
If you don't have a lot of topics, it's better to go the first way. If the number of color solutions is not limited, then pull out some of the styles and inline them directly into the page (ready-made css).