我正在尝试在 Yesod 的 Lucius 中使用 mixins，但遇到了问题。目前，我的“中心”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' 之外的所有 mixins -> 编译
- 删除除 'box_sizing' 之外的所有 mixins 并设为静态（无插值）-> 无效果
我很可能遗漏了一些明显的东西，而且我不想成为那个人，但是对于这些类型的东西，文档的方式并不多。也许这可以帮助处于类似位置的其他人。
无论如何，任何和所有的帮助表示赞赏。
编辑：
事实证明，在合并了一些单独的 lucius 文件后，'unlink' mixin 也可以毫无错误地编译。由于它在结构上与其他 mixin（例如“box_sizing”）基本相同，因此我现在知道插值不是罪魁祸首，也不是函数的格式（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"};
}
}
}
}