How to use Sass to generate various theme sets with minor differences-CodePudding

I have a solution which server various customers. Each customer has it's own theme, meaning a set of CSS files. There are a couple of elements, which are changing from customer to customer, so I'm using Sass to generate CSS files, using variables. Is there any solution to simplify below setup as it seems too complex,

├sass
│  ├CUSTOMER1
│  │  ├login.scss
│  │  ├style.scss
│  │  ├variable.scss
│  ├CUSTOMER2
│  │  ├login.scss
│  │  ├style.scss
│  │  ├variable.scss
│  ├login-base.scss
│  └style-base.scss
└compilerconfig.json

login-base.scss and style-base.scss contain the actual CSS, where variables are used.

Content of each login.scss (so the same file is present in each and every customer folder):

@import "variable";
@import "../login-base.scss";

Content of each style.scss (so the same file is present in each and every customer folder):

@import "variable";
@import "../style-base.scss";

variable.css varies across customers.

Content of compilerconfig.json:

[
  //CUSTOMER1
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER1/login.css",
    "inputFile": "sass/CUSTOMER1/login.scss"
  },
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER1/style.css",
    "inputFile": "sass/CUSTOMER1/style.scss"
  },
  //CUSTOMER2
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER2/login.css",
    "inputFile": "sass/CUSTOMER2/login.scss"
  },
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER2/style.css",
    "inputFile": "sass/CUSTOMER2/style.scss"
  }
]

Is there any way to simplify above setup? All my login.scss and style.scss files are exactly the same in all customer directories, which is redundant. Whenever a new customer comes (and we are serving tens of customers, potentially hundreds), I need to create a new folder, place all the files in the folder, make changes to the compilerconfig.json and change set the variable.scss content according to customers needs. So I'm doing a lot of steps, creating a good amount of files, but only one file really changes: variable.scss.

CodePudding user response：

In my opinion you could make a separate variables.scss file for all of the users, but every other scss files could be in the same directory like this.

├sass
|  |GLOBAL
|  |  |login.scss
|  |  |styles.scss
│  ├CUSTOMER1
│  │  ├variable.scss
│  ├CUSTOMER2
│  │  ├variable.scss
│  ├login-base.scss
│  └style-base.scss
└compilerconfig.json

in your variables.scss files you could write global vars as CSS variables like this:

:root{
  --primary-color: blue;
  --secondary-color: red;
  --font-family: sans-serif
/* etc. */
}

and in your scss files, you could use these vars without duplicate anything like this:

.my-button{
  background-color: var(--primary-color);
}

or like this

$primary-color: var(--primary-color);
.my-button{
  background-color: $primary-color
}

after that you just have to generate each user variables.css files, but the page will use the same styles.scss and login.scss files like that:

<link rel="stylesheet" href="variables.css"> <!-- variables needs to be the first one -->
<link rel="stylesheet" href="login.css">
<link rel="stylesheet" href="styles.css">

your config file should look like this:

[
  //GLOBAL
  {
    "outputFile": "(MyProjectPath)/themes/GLOBAL/login.css",
    "inputFile": "sass/Global/login.scss"
  },
  {
    "outputFile": "(MyProjectPath)/themes/GLOBAL/styles.css",
    "inputFile": "sass/Global/styles.scss"
  },
  //CUSTOMER1
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER1/variables.css",
    "inputFile": "sass/CUSTOMER1/variables.scss"
  },
  //CUSTOMER2
  {
    "outputFile": "(MyProjectPath)/themes/CUSTOMER2/variables.css",
    "inputFile": "sass/CUSTOMER2/variables.scss"
  },
]

hope it helps!