Lucius mixins 导致 "unexpected end of input"，找不到块的结尾

Question

我正在尝试在 Yesod 的 Lucius 中使用 mixin，但是运行遇到了问题。目前我的 'center' mixin 是唯一一个似乎有效的 mixin，它也恰好是唯一没有变量插值的 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")

我遇到过的问题：

添加尾随分号 -> 无效
删除除 'center' -> 编译之外的所有 mixin
删除除 'box_sizing' 之外的所有混入并设为静态（无插值）-> 无效

我很可能遗漏了一些明显的东西，我不想成为那个人，但是对于这些类型的东西，文档的方式并不多。也许这可以帮助处于类似位置的其他人。

无论如何，我们将不胜感激。

编辑：

事实证明，在合并一些单独的 lucius 文件后，'unlink' mixin 也可以正确编译。由于从结构上讲，它与 'box_sizing' 等其他 mixins 本质上相同，我现在知道插值不是罪魁祸首，也不是函数的格式（Guards vs. Equation）。

我越来越怀疑 Lucius 文件中的格式，因为 Haskell 代码似乎无关紧要。我开始觉得这个问题可能只是基本的 css 语法错误，无论出于何种原因我都视而不见。

编辑 2:

我已经为我的导航栏合并了 Lucius 代码，这表明以前无法编译的 mixin 在某些（虽然未知）情况下可以成功。

相关代码：
（注意 'font_size' mixin 在此代码中成功编译）

/* 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 :: Double -> Mixin
font_size size =
  [luciusMixin|
        font-size: #(pxsize}px;
        font-size: #(remsize)rem;
  |]

备注#(pxsize}px。

Answer 2

好吧，这个错误是由一些拼写错误 (font-size -> font_size; box-sizing -> box_sizing) 引起的，遗憾的是，由于我没有收到 'font-size' is not in scope 错误，所以我对命名错误的想法不以为然.解析器将 - 视为减法，因为 haskell 函数名称中不允许使用它们。从好的方面来说，我现在对 Yesod 和莎士比亚非常了如指掌，希望能帮助人们解决实际问题。

Lucius mixins 导致 "unexpected end of input"，找不到块的结尾

Lucius mixins cause "unexpected end of input", Can't find end of block

haskell

yesod

shakespeare-text