Lucius mixins导致“意外的输入结束”，无法找到块的结尾

Question

我试图在Yesod的Lucius中使用mixins，但遇到了问题。目前我的'中心'mixin是唯一可以工作的，这也是碰巧是没有变量插值的唯一混音，尽管我不确定这与问题的问题有关。

卢修斯：

@keyframes blink { 
    0% {opacity: 0} 
    40% {opacity: 0.8} 
    80% {opacity: 0} 
    100% {opacity: 0} 
} 

@-webkit-keyframes blink { 
    0% {opacity: 0} 
    40% {opacity: 0.8} 
    80% {opacity: 0} 
    100% {opacity: 0} 
} 


html, body { 
    height: 100%; 
    margin: 0; 
} 

*, *:after, *:before { 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
    ^{box-sizing "inherit"} 
} 

header { 
    min-height: 100%; 
    z-index: 0; 
    background-image: url(@{StaticR images_landing__jpg}); 
    background-position: center center; 
    background-size: cover; 

    .greeting { 
     min-width: 30%; 
     padding: 3%; 
     background-image: url(@{StaticR images_neg_lines_png}); 
     background-repeat: repeat; 
     text-align: center; 
     ^{center "both"} 
     color: whitesmoke; 

     h2, h4 { 
      font-family: "Lato"; 
      font-weight: 300; 
     } 
     h4 { 
      font-family: "Lato"; 
      ^{font-size 20} 
     } 
     h1 { 
      font-family: "Tangerine"; 
      font-weight: bold; 
      color: #ffffff; 
      ^{font-size 96} 
     } 
    } 

    .scroll-link { 
     ^{center "x"} 
     bottom: 5%; 
     .scroll-arrow { 
      display: inline; 
      path { 
       stroke: white; 
       fill: transparent; 
       stroke-width: 1px; 
       animation: blink 2s infinite; 
       -webkit-animation: blink 2s infinite; 
      } 
      path.a1 { 
       animation-delay: -1s; 
       -webkit-animation-delay: -1s; 
      } 
      path.a2 { 
       animation-delay: -0.5s; 
       -webkit-animation-delay: -0.5s; 
      } 
      path.a3 { 
       animation-delay: 0s; 
       -webkit-animation-delay: 0s; 
      } 
     } 
    } 
} 

.main-container { 
    background: whitesmoke; 
} 

混入：

{-# LANGUAGE QuasiQuotes #-} 
module Mixins 
    (center 
    , box_sizing 
    , font_size 
    , unlink 
    ) where 

import Text.Lucius 
import ClassyPrelude.Yesod 

center :: String -> Mixin 
center axis 
    | axis == "x" = 
    [luciusMixin| 
     left: 50%; 
     -webkit-transform: translate(-50%, 0); 
     -ms-transform: translate(-50%, 0); 
     transform: translate(-50%, 0); 
    |] 
    | axis == "y" = 
    [luciusMixin| 
     top: 50%; 
     -webkit-transform: translate(0, -50%); 
     -ms-transform: translate(0, -50%); 
     transform: translate(0, -50%); 
    |] 
    | otherwise = 
    [luciusMixin| 
     top: 50%; 
     left: 50%; 
     -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
    |] 

box_sizing :: String -> Mixin 
box_sizing box_model = 
    [luciusMixin| 
     -webkit-box-sizing: #{box_model}; 
     -moz-box-sizing: #{box_model}; 
     box-sizing: #{box_model}; 
    |] 

font_size :: Double -> Mixin 
font_size size = 
    [luciusMixin| 
     font-size: #(pxsize}px; 
     font-size: #(remsize)rem; 
    |] 
    where 
    pxsize = show size 
    remsize = show $ size * 0.125 

unlink :: String -> Mixin 
unlink color = 
    [luciusMixin| 
     color: #{color}; 
     text-decoration: none; 
    |] 

错误：

[...]/Foundation.hs:132:15: 
    Exception when trying to run compile-time code: 
     " 
[...] 
" (line 94, column 1) 
unexpected end of input 
expecting "/*", "}", "#", "@" or "{" 
checkIfBlock 
    Code: widgetFile "default-layout" 
    In the splice: $(widgetFile "default-layout") 

事情我已经troubleshot：

• 尾随分号 - >无影响
• 删除所有的混入，但“中心” - >编译
• 删除所有的混入，但“box_sizing”，使静态的（无插值） - >无效果

这是相当可能我错过了一些明显的东西，我讨厌这个人，但是对于这些类型的东西没有太多的文档介绍。也许这可以帮助处于类似位置的其他人。

无论如何，任何和所有的帮助表示赞赏。

编辑：

事实证明，合并一些单独​​的白斑狗鱼的文件之后，“取消链接”混入还编译没有错误。由于它在结构上来说基本上与其他混合类似，比如'box_sizing'，我现在知道插值不是罪魁祸首，也不是函数的格式（Guards vs. Equation）。

我越来越怀疑Lucius文件中的格式化，因为Haskell代码似乎并不重要。我开始感觉到这个问题可能只是基本的css语法错误，我无论出于何种原因都是盲目的。

编辑2：

我已经合并了卢修斯代码为我的导航栏，其中透露，以前未能编译，在一定的（虽然未知）的情况下一个mixin，才有可能成功。

相关的代码：
（注意 'FONT_SIZE' 混入这个代码成功地编译）

/* Navbar */ 
@navheight: 6rem; 

nav { 
    z-index: 10000; 
    position: absolute; 
    background-color: transparent; 
    color: rgba(255, 255, 255, 1); 
    height: #{navheight}; 
    line-height: #{navheight}; 
    ^{font-size 16}; 
    .left { 
     padding-left: 2rem; 
     padding-right: 2rem; 
     height: #{navheight}; 

     .brand { 
      display: inline; 
      font-family: "Lato"; 
      font-weight: bold; 
      ^{unlink "inherit"}; 
     } 
     .more { 
      display: inline; 
      font-family: "Lato"; 
     } 
    } 

    .right { 
     height: #{navheight}; 
     ul li { 
      display: inline-block; 
      padding-left: 2rem; 
      padding-right: 2rem; 
      a { 
       font-family: "RaleWay"; 
       display: block; 
       text-align: center; 
       ^{unlink "inherit"}; 
      } 
     } 
    } 
} 

Answer 1

好吧，错误是由一些错别字（font-size -> font_size; box-sizing -> box_sizing）引起的，遗憾的是我因为我没有收到'font-size' is not in scope错误而忽略了命名错误的想法。解析器将-视为减法，因为它们在haskell函数名称中是不允许的。在好的一面，我现在知道Yesod和Shakespeare 非常好，并可以希望帮助实际问题的人的内部问题。

Answer 2

我怀疑，它就在那里

font_size :: Double -> Mixin 
font_size size = 
    [luciusMixin| 
     font-size: #(pxsize}px; 
     font-size: #(remsize)rem; 
    |] 

注#(pxsize}px。