Vaadin sass -ms-filter 编译

Question

我在 scss mixin 中的编译 -ms-filter 属性有问题。

mytheme.scss

@import "../reindeer/reindeer.scss";
@import "bg-alpha.scss";

@mixin mytheme {
  @include reindeer;

  .v-button {
    @include bg-alpha(0.7); 
    -ms-filter:alpha(opacity=0.4);      <---- OK
 }
}

bg-alpha.scss

@mixin bg-alpha ($a) {
    opacity:$a;
    -ms-filter:alpha(opacity=$a*100);    <---- ERROR
}

编译时抛出此错误

com.vaadin.sass.internal.parser.SCSSParseException: Error when parsing file C:\Develop...\VAADIN\themes\mytheme\bg-alpha.scss
Encountered "-ms-filter" at line 3, column 9.
Was expecting one of:
"}" ...
"+" ...
">" ...
"~" ...
"[" ...
"*" ...
"&" ...
"." ...
":" ...
<INTERPOLATION> ...
"@include" ...
"@debug" ...
"@warn" ...
"@each" ...
"@if" ...
"@extend" ...
"@content" ...
<IDENT> ...
<VARIABLE> ...
<HASH> ...
"@media" ...
"@page" ...
"@font-face" ...
<KEY_FRAME_SYM> ...

at com.vaadin.sass.internal.ScssStylesheet.get(ScssStylesheet.java:141)
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:69)
at com.vaadin.sass.internal.visitor.ImportNodeHandler.traverse(ImportNodeHandler.java:81)
at com.vaadin.sass.internal.ScssStylesheet.importOtherFiles(ScssStylesheet.java:192)
at com.vaadin.sass.internal.ScssStylesheet.compile(ScssStylesheet.java:185)
at com.vaadin.server.VaadinServlet.serveOnTheFlyCompiledScss(VaadinServlet.java:815)
at com.vaadin.server.VaadinServlet.serveStaticResourcesInVAADIN(VaadinServlet.java:601)
at com.vaadin.server.VaadinServlet.serveStaticResources(VaadinServlet.java:571)
at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:229)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:290)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:233)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:191)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:127)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:102)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:109)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:298)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:859)
at org.apache.coyote.http11.Http11Protocol$Http11ConnectionHandler.process(Http11Protocol.java:588)
at org.apache.tomcat.util.net.JIoEndpoint$Worker.run(JIoEndpoint.java:489)
at java.lang.Thread.run(Unknown Source)

这个问题属于mixins，因为当我删除“-ms-filter:alpha(opacity=$a*100);”来自 bg-alpha mixin，一切正常，没有抛出错误。

请问，谁能帮我解决这个问题？我用谷歌搜索了很多时间来寻找解决方案，但我没有成功。我也尝试用纯 sass 编译器模拟这个问题。这似乎是正确的 sass 代码。

Answer 1

SASS 算术是 Vaadin 7 中的一个相当新的功能 - 我认为仅在 Vaadin 7.1 中 - 似乎有一些错误（查看Vaadin Forum）； SASS 解析器/编译器不是一个单独的库，而是完全在 Vaadin 框架本身中实现的。

我没有在愤怒中使用 Vaadin + SASS - 但就个人而言，我会

a) 确保您使用的是 Vaadin 7.1

b) 如果这不起作用，请先尝试将值分配给临时变量，例如

@mixin bg-alpha ($a) {

  $msopacity=$a * 100;

  opacity:$a;
  -ms-filter:alpha(opacity=$msopacity);    
}