重用jquery ui框架类中的css属性？

jQueryUI提供了一个方便的css框架：

只需使用jQueryUI的CSS类（ui小部件内容、ui小部件标题等），就可以轻松创建可通过

在设计我的应用程序时，我有时缺少的一个功能是重用jQueryUI的css类中的css属性，但不是所有属性。使用

none可以实现简单的重用！重要信息

例如，当您只想获得

.ui小部件内容

的前景

颜色

，而不需要背景或边框时，您可以执行以下操作：

<style>
.no-background { background: none !important; }
.no-border { border: none !important; }
</style>
<div class="ui-widget-content no-background no-border">
  hi world :)
</div>

JS代码：

$(document).ready(function () {
  var css= '', i, colors = [
      $('.cssHelper .ui-widget-content').css('color'),
      $('.cssHelper .ui-widget-header').css('background-color'),
      $('.cssHelper .ui-state-hover').css('background-color'),
      $('.cssHelper .ui-state-default').css('background-color'),
      $('.cssHelper .ui-widget-header.ui-state-active').css('background-color')
  ];
  for (i = 0; i < colors.length; i += 1) {
      css += '.ui-color-' + (i + 1) + ' { color: ' + colors[i] + '}\n';
  }
  $('style.computedStyles:first').text(css);
});

$（文档）.ready（函数（）{
变量css=''，i，颜色=[
$（'.cssHelper.ui小部件内容'）.css（'color'），
$（'.cssHelper.ui小部件标题'）.css（'background-color'），
$（'.cssHelper.ui state hover'）.css（'background-color'），
$（'.cssHelper.ui状态默认值'）.css（'background-color'），
$（'.cssHelper.ui小部件头.ui状态活动'）.css（'background-color'））
];
对于（i=0；i

我觉得JavaScript解决方案有点邪恶。此外，它会在某些浏览器中导致错误

---

是否可以使用普通CSS和/或服务器端工具（SASS/LESS/…）完成此操作？

CSS代表级联样式表。这意味着由类设置的样式将“级联”

因此，如果您有自己的css文件，并将其包含在jquery css之后。它将超越jquery css。同样，如果将两个类附加到html元素，则第二个类样式将覆盖第一个类样式

另一种重写css类特定样式的方法是使用！css上的重要指示器。有标记的东西！重要的东西不会被写得太多，不管它们以什么顺序出现

来回答你的问题。在您自己的css文件中，让您的类指定如下颜色：

.myColour{
    background-:none!important;
    border:none!important;
}

并对元素进行如下分类：

<div class="ui-widget-content myColour" >
  hi world :)
</div>

嗨，世界：）

既然您也用less标记了您的问题，我想您可以使用它。可能会有一个解决方案给你，也许不是完美的，但我知道你现在使用的是什么

您可能知道，可以在样式声明B中使用类名a将所有样式属性从a应用到类B。它称为Mixin：

我想你可以通过先使用mixin，然后覆盖它的属性来实现你想要的。您的语法如下所示：

master.less:

@import "jquery-ui.less"

 ... 

.myCustomWidget {
  .ui-widget-content;
  background: none;
  border: none;
}

...

注意，我将jquery-ui.css的扩展名改为.less，以使less编译器实际包含该文件，而不是保持@import语句不变。因为css也是有效的，所以这应该是你所需要做的一切

如果你将less编译成css，你会得到一个单独的class.myCustomWidget，你可以在HTML中使用它，而不需要额外的类。此外，如果通过应用不同的主题或其他内容来更改jquery-ui.css，则只需重新编译master.less即可合并更改。（我强烈建议您在本地或服务器端预编译less文件，而不是让js在客户端完成。这是为了防止样式依赖于js）

---

还请注意，您将不再需要在html中链接到实际的jquery-ui.css文件，因为它将完全包含在编译的master.css文件中。这意味着少了一个页面请求，它会给你一个性能奖励。

嗨，谢谢你的回答，

！重要信息

indicator是创建与浏览器兼容的css类的好方法。但是我还没有找到一个干净的重用方法，例如：

ui小部件头的
背景色
作为
边框色
ooh，我误解了你的问题。您想将不同样式属性中的值用于其他样式属性吗？是的，一直监视我屏幕的老板会在我的待办事项列表中添加奇怪的要求；）我猜这只有在服务器端CSS预处理器上才可能实现？嗯，是的，我真的不知道有什么好方法可以做到这一点：（对不起！我已经看过mixin了，但是我问是否有一种重用的方法，例如：
ui小部件头的
背景色
作为
边框色
？似乎构建jqueryUi主题的方法比较少。我还没有进一步研究它，但我想颜色将是可变的如果你导入这些变量，你应该能够在你自己的更少的文件中重用它们。。。
@import "jquery-ui.less"

 ... 

.myCustomWidget {
  .ui-widget-content;
  background: none;
  border: none;
}

...