Question

我试图在Yesod的Lucius中使用mixins，但遇到了问题。目前我的中心＆＃39; 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")

我遇到麻烦的事情：

添加尾随分号 - ＆gt;没效果
删除所有混音，但＆＃39; center＆＃39; - ＆GT;编译
删除所有混音，但是＆＃39; box_sizing＆＃39;并使静态（无插值） - ＆gt;没效果

很可能我错过了一些明显的东西，而且我讨厌那个的家伙，但是那里并没有太大的影响。这些类型的东西的文档。也许这可以帮助处于类似位置的其他人。

无论如何，感谢任何和所有帮助。

编辑：

事实证明，在合并了一些单独的lucius文件后，＆＃39;取消链接＆＃39; mixin也可以毫无错误地编译。由于它在结构上讲与其他混合物基本相同，例如“盒子化”和“盒子化”。我现在知道插值不是罪魁祸首，也不是函数的格式（Guards vs. Equation）。

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

编辑2 ：

我已经为我的导航栏合并了Lucius代码，该代码显示，在某些（尽管未知）情况下，以前无法编译的mixin可以成功。

相关代码：
（注意＆＃39; font_size＆＃39; 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和shakespeare 非常的内部，并且可以帮助那些有实际问题的人。

Lucius mixins导致＆＃34;意外结束输入＆＃34;，无法找到阻止结束

2 个答案: