ZK LESS Syntax Notes

From Documentation
Revision as of 09:57, 1 September 2014 by Hanhsu (talk | contribs) (ZK-Less Syntax Notes)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

Last Update : 2014/09/01


Version Date Content
     



Last Update : 2014/09/01

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