Question

我有CSS样式，它绘制一个按钮。我需要重复使用这种风格来绘制不同颜色的按钮。

.button {
   color: white;
   background-color: black;
   border: 1px solid orange;
   (...)
}

我知道我可以覆盖CSS属性。但问题是我必须覆盖按钮的几乎所有代码，它没有意义。更容易创建另一个CSS类，它只与颜色值不同。是否可以创建一些可以将颜色作为参数的样式，保留所有其他css属性？

Answer 1

您可以使用GWT（Here）的运行时替换和注释@eval

运行时替换：

提供运行时支持，用于评估静态方法样式表被注入。可以添加触发/动态更新如果我们允许程式化操作风格，未来元素。（参见文件）

例如：

@eval buttonColor com.myApp.MyTheme.getButtonColor();

.button {
   color: buttonColor ;
   background-color: black;
   border: 1px solid orange;
   (...)
}

评估期间使用的方法必须是静态

 public class MyTheme {

...

    public static String getButtonColor(){
       return "white";
    }
}

Answer 2

GWT在编译时支持参数化CSS。这使您可以在CSS文件中嵌入编译时指令，例如

@def TEXT_COLOR   #A0A0A0

然后你可以使用CSS规则中的值：

.some-class {
   color: TEXT_COLOR;

}

您还可以访问Java中的值（在编译时）。您可以在此处了解该功能：http://code.google.com/p/google-web-toolkit/wiki/CssResource

Answer 3

您可以使用按钮类添加新类。

.newclass{
color:#ffffff !important;
}

只需确保将!important添加到新的类颜色属性中。

是否可以创建参数化的CSS样式？

3 个答案: