ZK LESS Syntax Notes

From Documentation


Stop.png This article is out of date, please refer to ZK Developer's Reference ...Theme Template for more up to date information.

Be aware of using control-flow tags like <c:if>

If you are using control-flow tags like <c:if> in your ZK-Less files, you have to be really care with the situations like below:

 .z-selector {
      border-left-color: @border;
      <c:if test="${zk.ie == 8}">
      border-left-color: @border4IE8;
      </c:if>
 }

If @border and @border4IE8 happens to be the same, Less will optimize them and only keep the last expression while compiling. Therefore, the above Less expression is equivalent to the following:

 .z-selector {
  // removed by less
  <c:if test="${zk.ie == 8}">
  border-left-color: red;
  </c:if>
 }

So, to be safe, please change the order of your Less expressions like this:

 .z-selector {
  <c:if test="${zk.ie == 8}">
  border-left-color: @border4IE8;
  </c:if>
  border-left-color: @border;
 }

Here, when @border and @border4IE8 are the same, the compiled CSS looks like:

 .z-selector {
  <c:if test="${zk.ie == 8}">
  </c:if>
  border-left-color: red;
 }

and if they are different, the result is:

 .z-selector {
  <c:if test="${zk.ie == 8}">
  border-left-color: red;
  </c:if>
   border-left-color: rgba(rr,gg,bb,aa); // IE8 will ignore this 
 }

Remember to always place your control-flow tags first to avoid any possible errors like the example showed.

Version History

Last Update : 2022/04/07


Version Date Content
     


Copyright © Potix Corporation. This article is licensed under GNU Free Documentation License.