ZK Style Customization Guide/Integrate with LESS/How ZK works with LESS/ZK LESS Syntax Notes

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 not the same, 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

Version	Date	Content