ZK LESS Syntax Notes"
From Documentation
Line 20: | Line 20: | ||
// removed by less | // removed by less | ||
<c:if test="${zk.ie == 8}"> | <c:if test="${zk.ie == 8}"> | ||
− | + | border-left-color: red; | |
</c:if> | </c:if> | ||
} | } | ||
Line 30: | Line 30: | ||
.z-selector { | .z-selector { | ||
<c:if test="${zk.ie == 8}"> | <c:if test="${zk.ie == 8}"> | ||
− | + | border-left-color: @border4IE8; | |
</c:if> | </c:if> | ||
border-left-color: @border; | border-left-color: @border; | ||
Line 42: | Line 42: | ||
<c:if test="${zk.ie == 8}"> | <c:if test="${zk.ie == 8}"> | ||
</c:if> | </c:if> | ||
− | + | border-left-color: red; | |
} | } | ||
</source> | </source> | ||
Line 51: | Line 51: | ||
.z-selector { | .z-selector { | ||
<c:if test="${zk.ie == 8}"> | <c:if test="${zk.ie == 8}"> | ||
− | + | border-left-color: red; | |
</c:if> | </c:if> | ||
border-left-color: rgba(rr,gg,bb,aa); // IE8 will ignore this | border-left-color: rgba(rr,gg,bb,aa); // IE8 will ignore this |
Revision as of 01:37, 2 September 2014
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 |
---|---|---|