0

目前我正在为一些应用程序开发 GUI，该应用程序是在 QT（多平台框架）中开发的。QT 中的 GUI 可以设置为普通 CSS 样式。

因此，我将 GUI 开发为一个基本的 Web 应用程序（HTML5、CSS3 和 JS），并且出于某些原因，我使用 LESS 预处理器进行样式设置和创建 OOCSS（面向对象的 CSS）......

由LESS生成：

.button {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;
}

.button.button-big {
    font-size: 20px !important;
    width: 200px !important;
}

.button.button-green {
    background-color: green !important;
    color: white !important;
}

是否有任何工具或任务（grunt/gulp）可以将 OOCSS 转换为 oldschool 样式（长版）？

预期结果：

.button {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;
}

.button-big {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;

    font-size: 20px !important;
    width: 200px !important;
}

.button-green {
    position: absolute;
    display: block;
    text-align: center;
    line-height: 50px;
    height: 50px;   
    text-transform: uppercase;
    text-decoration: none;  
    font-size: 14px;
    width: 120px;
    background-color: white;
    color: blue;

    background-color: green !important;
    color: white !important;
}

当然，我将不得不清理课程，但该工具将为我节省大量时间。

原因： 我的客户在 CSS 方面不高级。所以，OOCSS 对他来说可能有点困惑。

感谢您的回复亚当

4

1 回答 1

0

首先，我认为您尝试让您的客户尽可能轻松地做到这一点是很棒的。那太棒了！

其次，我认为这是您的客户学习 CSS 基础知识的绝佳机会。是的，长版本不使用 OOCSS，但它现在需要管理更多声明，从长远来看，这可能会更难管理。

再说一次，你的客户让你帮助解释事情。这是建立牢固的客户关系和良好业务的绝佳机会。

如果您的客户也可以学习 LESS 那就太好了，但如果他们不能，您可以随时使用Pleeease。它完成了我们喜欢的关于预处理器的所有事情，但使用了 vanilla css。

祝你好运！保持好状况！

于 2015-09-19T13:23:46.093 回答