Lucius mixinsは "予期せぬ入力の終了"を引き起こし、ブロックの終了を見つけることができません

Question

私はYesodのLuciusでmixinsを使用しようとしていますが、問題が発生しました。現時点では、私の 'center'ミックスインは、動作するように思われる唯一のミックスインです。これは、問題の問題に関係しているかどうかはわかりませんが、変数補間のないミックスインです。

ルキウス：

@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; 
    |] 

エラー：私はtroubleshotき

[...]/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」を削除し、静的（補間なし）を作る
• をコンパイル - >影響なし

をそれはかなりです私は明らかな何かを見逃している可能性があります。私はであることを嫌っています。しかし、男ですが、これらの種類のドキュメントの方法はあまりありません。おそらく、これは他の人と同様の立場にある人を助けることができます。

とにかく、すべてのヘルプは高く評価されます。

EDIT：結局のところ

、いくつかの独立したルキウスファイルをマージした後、「リンク解除」ミックスインは、エラーなしでコンパイルされます。構造的に言えば、 'box_sizing'のような他のミックスインと本質的に同じであるという事実のために、私は今補間が原因ではなく、関数のフォーマット（Guards vs. Equation）も知っています。

ハスケルコードが重要でないように見えるので、私はLuciusファイルの書式設定の疑いが増しています。私は問題が基本的なCSS文法エラーであるかもしれないと感じ始めています。私は何らかの理由で目が見えません。

EDIT 2：

私は以前にコンパイルできなかったというミックスインを明らかにした私のナビゲーションバー、用ルキウスコードをマージしている、ある特定の状況の下で（不明いえ）、成功することができます。

関連するコード：
があり、それは

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

注#(pxsize}pxで、

/* 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の内部とシェイクスピア非常にを知っていて、実際にの人々に役立つことができます。

Answer 2

私は疑う（ 'FONT_SIZE' ミックスインが正常にこのコードにコンパイルされます注意してください）。