twitter-bootstrap – 更少的bootstrap主题

发布时间：2020-12-17 20:42:18 所属栏目：安全来源：网络整理

导读：我们在项目中使用bootstrap.我们为bootstrap购买了一个自定义主题,围绕它创建了一个很好的自定义样式,并添加了我们在项目中使用的许多有用的样式.这个主题使用了LESS. 现在我们的每个客户都希望为他们的网站定制配色方案.通过简单地改变一些LESS变量,我们可

我们在项目中使用bootstrap.我们为bootstrap购买了一个自定义主题,围绕它创建了一个很好的自定义样式,并添加了我们在项目中使用的许多有用的样式.这个主题使用了LESS.

现在我们的每个客户都希望为他们的网站定制配色方案.通过简单地改变一些LESS变量,我们可以生成完全不同的外观.

例如：

@import "../../theme/style.less";
@import "../../shared.less";

// Basic Colors
@navy: #781d7e;       // Primary color
@dark-gray: #c2c2c2;  // Default color
@blue: #8dc63f;       // Success color
@lazur: #00aedb;      // Info color
@yellow: #f7941e;     // Warrning color
@red: #ed1c24;        // Danger color

这将生成包含所有样式的完整css文件.每个客户端都有自己的一组生成.css文件.我们的问题是每次进行更改时都需要很长时间来编译它们.

我们如何使用LESS具有基本主题并仅生成修改使用修改变量的值所需的类覆盖？

例如,如果btn-primary background-color是@navy,那么对于新的配色方案,我需要的是一个css文件,其中包含.btn-primary的类覆盖,将background-color更改为@navy的新值.这对LESS来说甚至可能吗？

谢谢,

解决方法

请参阅我对类似问题的回答,这有助于解决您的问题. https://stackoverflow.com/a/25055203/138029

如果您使用的是MVC 4或更高版本,则可以使用BundleTransformer编译LESS服务器端.

它可能取决于您希望如何提供文件.如果您在运行时知道所有客户端URL,则只需添加为每个客户端添加捆绑URL到捆绑包配置.如果不这样做,客户端就像我们的情况那样灵活/动态,那么添加一个控制器动作来处理动态主题.

我扩展了我们的原始用例,并创建了一个包含主题的更可重用的方法.

演示网站：http://bundletransformer-theme-builder.azurewebsites.net/

GitHub回复：https://github.com/benembery/bundle-transformer-theme-builder

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!