html - CSS 为 Bootstrap 创建父类 (SiteBuilder Lite)

Question

谢谢。首先，我想说这不是普通问题。我是一名 php 开发人员，主要专注于后端开发。

我遇到了障碍。

基本上我想做的就是这个

.parentclass {

 .a-bunch-of-bootstrap-children {

 }

}

我知道可以这样做:

.parentclass .child-class {}

但这并不是我想要的。看，这需要我改变一切，而且有很多变化。

我在网站/模板构建器系统 (SiteBuilder Lite) 上工作，你们中的一些人可能知道这个系统。

我将新模板实现到系统中或他们称之为“ block ”。

现在，系统使用skeleton.html 来构建模板。它包含所有要包含的 Assets 。包括所有 css 文件，不允许为每个站点加载特定文件。

现在，我们加载 1 个主 Bootstrap 样式。但是其他模板有不同的 Bootstrap 样式。所以我想做的只是在父 div 中包含一个模板文件，然后在不篡改主 Bootstrap 样式并为每个子项添加不同的父类和样式的情况下，对所有 Bootstrap 子项进行相应的格式化。

我知道这不是最有效的方法，所以如果有人有任何建议，请提出建议。

Answer 1

.parentclass {

 .a-bunch-of-bootstrap-children {

 }
}

实际上在 SCSS 中使用这种语法是完全可能的。

Sicne SCSS 与 CSS 完全兼容，您唯一要做的就是将文件名从 .css 更改为至 .scss ，然后使用 SCSS 编译器导出所有自定义的 Bootstrap css 文件。

Compass如果您不使用 Gulp 或 Grunt 或其他任务生成器，这将是您的不错选择。

虽然我不太熟悉SiteBuilder Lite ，以下步骤应该有效:

1. 添加包装标签 <div id="customized-page-1"></div>在 skeleton.html
2. 从 page-1.css 更改自定义的 css 文件名至 page-1.scss
3. 在 page-1.scss文件，添加嵌套选择器 #customized-page-1包装原始的CSS规则
4. 安装指南针
5. 转到您的 scss 文件夹并运行 compass compile在命令行中
6. 您现在将看到具有相同文件名的编译后的 css 文件
7. 完成!