Lucius mixins вызывает "неожиданный конец ввода", не может найти конец блока
Я пытаюсь использовать миксины в Lucius Йесода, но столкнулся с проблемой. В настоящее время мой "центральный" миксин работает только один, что также является единственным миксином без интерполяции переменных, хотя я не уверен, что это связано с проблемой.
Люциус:
@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")
Вещи, которые я устраняю:
- Добавить конечные точки с запятой -> Нет эффекта
- Удалить все миксины, кроме "центра" -> Компиляции
- Удалить все миксины, кроме "box_sizing" и сделать статичным (без интерполяции) -> Без эффекта
Вполне возможно, что я упускаю что-то очевидное, и я бы не хотел быть этим парнем, однако не так много документации для подобных вещей. Возможно, это может помочь кому-то еще в аналогичной должности.
В любом случае, любая помощь приветствуется.
РЕДАКТИРОВАТЬ:
Оказывается, после объединения некоторых отдельных файлов lucius, миксин unlink также компилируется без ошибок. Из-за того факта, что он структурно, по сути, идентичен другим миксинам, таким как "box_sizing", я теперь знаю, что интерполяция не является ни виновником, ни форматированием функции (Guards vs. Equation).
Я становлюсь все более и более подозрительным к форматированию в файле Lucius, поскольку кажется, что код на Haskell незначителен. Я начинаю чувствовать, что проблема может быть просто основной синтаксической ошибкой CSS, к которой я по какой-то причине не обращаю внимания.
РЕДАКТИРОВАТЬ 2:
Я объединил код Lucius для моей панели навигации, который показал, что миксин, который не может быть скомпилирован ранее при определенных (хотя и неизвестных) обстоятельствах, может быть успешным.
Соответствующий код:
(обратите внимание, что микс '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"};
}
}
}
}
2 ответа
Ну, ошибка была вызвана несколькими опечатками (font-size -> font_size; box-sizing -> box_sizing), к сожалению, я остекленел над идеей ошибки именования из-за того, что я не получил 'font-size' is not in scope ошибка. Парсер видел - как вычитание из-за того, что они не допускаются в именах функций haskell. С другой стороны, теперь я хорошо знаю внутренности Йесода и Шекспира и могу надеяться, что смогу помочь людям с актуальными проблемами.
Я подозреваю, что это там
font_size :: Double -> Mixin
font_size size =
[luciusMixin|
font-size: #(pxsize}px;
font-size: #(remsize)rem;
|]
Заметка #(pxsize}px,