ZK LESS Syntax Notes"
(One intermediate revision by one other user not shown) | |||
Line 1: | Line 1: | ||
{{ZKStyleCustomizationGuidePageHeader}} | {{ZKStyleCustomizationGuidePageHeader}} | ||
+ | |||
+ | {{Deprecated| url=[[ZK_Developer's_Reference/Theming_and_Styling/Creating_Custom_Themes/Theme_Template| ZK Developer's Reference ...Theme Template]]}} | ||
= Be aware of using control-flow tags like <c:if> = | = Be aware of using control-flow tags like <c:if> = | ||
Line 46: | Line 48: | ||
</source> | </source> | ||
− | and if they are | + | and if they are different, the result is: |
<source lang="html"> | <source lang="html"> |
Latest revision as of 05:33, 7 April 2022
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
Version | Date | Content |
---|---|---|