当您有多个设计时，如何构建模板，但CMS只能上传1个包含所有样式和模板的文件？

Question

我正在为我的电子商务商店创建模板。我有多个品牌，每个品牌都有自己的域名和特定的设计。除了那些，我还将创建类似主域的东西，其中将有来自每个品牌的所有产品。我的项目的基础是一个自定义的CMS，我可以上传所有我的模板只捆绑在一个.rar文件中。对于模板编码，我使用SASS，grunt / gulp + compass，JS，Freemarker和html。

我从未编写过如此广泛的项目编码，也不知道如何构建模板，以便在将来修改的情况下修改这些模板很容易。我在谈论的问题就像你有14个品牌，并希望仅在所有14个域中的6个域上添加特定的操作按钮。显然，我不想进入这6个品牌文件夹中的每个文件夹，并且每次（6次）为该按钮添加HTML代码和SASS样式。另一方面，我也不想将所有14个品牌的SASS样式编译并捆绑成一个CSS文件，因为在这种情况下，我将在我的每个域中包含此CSS文件。

您是否曾经遇到类似的问题？ - 您有多个域，但您的CMS允许您上传仅包含所有样式和模板的1个文件。

问题是如何构建这些模板 - 例如，我应该为一个名为_typography.scss的文件中的每个域设置排版样式，还是应该_typography.scss我的每个品牌的文件？

Answer 1

您正在使用Gulp，因此请充分利用您的工作流程。

1. 为每个品牌创建1个根SCSS文件：

assets/css/common/_variables.scss
assets/css/common/_typography.scss
assets/css/main.brand1.scss
assets/css/main.brand2.scss
assets/css/main.brand3.scss

1. 在文件中定义变量的默认值：

// assets/css/comon/_variables.scss
$font-main: Arial !default;

1. 在与品牌相关的根文件中覆盖这些值：

// assets/css/main.brand1.scss
$font-main: 'Comic Sans';

@include 'common/variables';
@include 'common/typography';

1. 将这些变量用于所有其他文件：

// assets/css/common/_typography.scss
.h1 {
  font-family: $font-main;
}

1. 使用Gulp生成所有CSS文件：

public/css/main.brand1.css
public/css/main.brand2.css
public/css/main.brand3.css