GSS 在 GWT 中的语法差异

GSS 功能

GssResource 支持 Closure stylesheet 提供的所有功能。请参考 Closure stylesheet 文档 除了 Closure stylesheet 功能之外，GssResource 还支持 CssResource 中引入的大部分功能。

常量

可以使用 @def at-rule 定义常量。但是 GSS 要求常量以大写字母定义。

/* CSS */
@def myConstant 12px

/* GSS */
@def MY_CONSTANT 12px;

/* You can also use any gss function to define a constant */
@def MARGIN mult(divide(100%, 6), 4);

运行时替换

在旧的 CssResource 中，可以使用 @eval 规则调用 Java 代码。在 GSS 中，语法略有改变。您需要调用 eval() 方法并将 Java 表达式作为参数传递，表达式用引号括起来

/* CSS */
@eval myColor com.foo.bar.client.resource.Colors.getColor()

/* GSS */
@def MY_COLOR eval("com.foo.bar.client.resource.Colors.getColor()");

/* direct usage */
.red {
    color: eval("com.foo.bar.client.resource.Colors.getColor()");
}

条件 CSS

GssResource 提供 @if、@elseif 和 @else at-rule 来创建条件 CSS。这些条件会根据延迟绑定属性的值进行测试。为此，GssResource 提供了一个 is() 函数。该函数接受两个参数。第一个是配置属性或绑定属性的名称，第二个是期望的值。如果属性的值与期望的值不同，则 is() 函数将返回 false，否则返回 true。如果只传递一个参数，则该函数假设测试的是 user.agent 属性。

/* CSS */
@if user.agent ie8 ie9 {

  .foo {...}

} @else {

  .bar {...}

}

@if locale en {
  .baz {...}
}

/* GSS */
@if (is("ie8") || is("ie9")) {

  .foo {...}

} @else {

  .bar {...}

}

@if (is("locale", "en")) {
  .baz {...}
}

也可以使用任何布尔型配置属性，而无需使用 is() 函数

/* GSS */
@if (MY_CONFIGURATION_PROPERTY) {

  .foo {...}

} @else {

  .bar {...}

}

配置属性需要是单值，其值需要是 true 或 false。

<set-configuration-property name="MY_CONFIGURATION_PROPERTY" is-multi-valued="false" />

<set-configuration-property name="MY_CONFIGURATION_PROPERTY" value="true" />

在 GSS 中，可以使用逻辑运算符（如 &&、|| 和 !）来进行条件判断。

@if (is("ie8") || is("ie9") && !is("locale",  "en")) {

  .foo {padding: 8px;}

} @elseif (is("safari")) {

  .foo {padding: 18px;}

} @else {

  .foo {padding: 28px;}

}

注意

• 可以使用条件 CSS 来初始化常量

  @if (is("ie8") || is("ie9")) {
    @def PADDING 15px;
  }@else {
    @def PADDING 0;
  }
  

• is() 函数不能在条件 CSS 上下文之外使用。@def IS_IE8 is("ie8") 将无法工作。

条件中的运行时评估。

使用旧的语法，可以在运行时做出决策。GSS 使用略有改变的语法来支持这一点。与运行时评估一样，您必须使用 eval() 函数并将任何有效的布尔型 Java 表达式作为参数传递

/* CSS */
@if (com.module.Foo.staticBooleanFunction()) {
  .foo {...}
}
/* GSS */
@if (eval("com.module.Foo.staticBooleanFunction()")) {
  .foo{...}
}

请注意

• 布尔运算符 &&、|| 不能与运行时条件一起使用。

• 与编译时评估的条件不同，不能在运行时条件中使用常量。以下代码将无法编译

  @if (eval("com.module.Foo.staticBooleanFunction()")) {
    @def FOO 5px;
  }
  

• 不能使用常量作为条件

  @def MY_BOOLEAN eval("com.module.Foo.staticBooleanFunction()");
  
  @if (MY_BOOLEAN) {
    ...
  }
  

图像精灵

在 GssResource 中，不需要使用 at-rule 来定义精灵。您必须使用特殊的 gwt-sprite 属性。与以前一样，该属性将被替换为构建精灵所需的属性。

/* CSS */
@sprite .logout {
  gwt-image: "iconLogin";
  display: block;
  cursor: pointer;
}

/* GSS */
.logout {
    gwt-sprite: "iconLogin";
    display: block;
    cursor: pointer;
}

对数据资源的引用

要访问捆绑在同一个 ClientBundle 中的资源的 URL，GssResource 引入了 resourceUrl() 方法。该函数将根据 DataResource.getUrl() 的返回值生成一个 url('some_url') 值。它可以在您的常量定义中使用，也可以直接在您的 CSS 规则中使用。

/* CSS */
@url BACKGROUND_IMAGE myImageName

/* GSS */
@def BACKGROUND_IMAGE resourceUrl("myImageName");

/* Direct usage of resourceUrl */
.logout {
    background-image: resourceUrl("logout");
}

RTL 支持

参见 https://code.google.com/p/closure-stylesheets/#RTL_Flipping

外部样式类

@external at-rule 可在 CssResource 中使用，以禁止选择器混淆，同时仍允许对选择器名称进行编程访问。此 at-rule 仍可以在 GSS 中使用，但有一些限制：不要在样式类前面使用点 (.)，并且如果使用 * 后缀来匹配多个样式类，则需要用引号将表达式括起来。

/* CSS */
@external .foo;

/* GSS */
@external foo;

/* Don't obfuscate the class myLegacyClass and all classes starting with gwt- */
@external myLegacyClass 'gwt-*';