Thymeleaf 3.0教程：12 内嵌(三)

12.4 CSS内嵌

  Thymeleaf还允许在CSS <style >标签中使用内联，例如:

<style th:inline="css">
  ...
</style>

  例如，假设我们将两个变量设置为两个不同的字符串值:

classname = 'main elems'
align = 'center'

  我们可以像这样使用它们:

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

  结果将像下面这样:

<style th:inline="css">
    .main\ elems {
      text-align: center;
    }
</style>

  注意CSS内联也很智能，就像JavaScript一样。具体来说，通过转义表达式(如[[${classname}]] )输出的表达式将作为CSS标识符进行转义。这就是为什么我们的classname = 'main elems' 在上面的代码片段中变成了main elems。

高级功能:CSS自然模板等。

  与前面对JavaScript的解释相同，CSS内联还允许我们的<style>标记静态和动态工作，即通过在注释中包装内联表达式作为CSS自然模板。请参见:

<style th:inline="css">
    .main\ elems {
      text-align: /*[[${align}]]*/ left;
    }
</style>