1

Yesod の 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")

私がトラブルシューティングしたこと：

  • 末尾にセミコロンを追加 -> 効果なし
  • 'center' 以外のすべての mixin を削除 -> コンパイル
  • 「box_sizing」以外のすべての mixin を削除し、静的にする (補間なし) -> 効果なし

私が明らかな何かを見逃している可能性は十分にあり、私はそのような人になりたくありませんが、これらのタイプのドキュメントの方法はあまりありません. おそらく、これは同様の立場にある他の誰かを助けることができます。

とにかく、すべての助けに感謝します。

編集：

結局のところ、いくつかの個別の lucius ファイルをマージした後、「リンク解除」ミックスインもエラーなしでコンパイルされます。構造的に言えば、「box_sizing」などの他の mixin と本質的に同一であるという事実により、補間が原因でも関数のフォーマット (ガードと方程式) でもないことがわかりました。

Haskell コードは重要ではないように思われるため、Lucius ファイルのフォーマットにますます疑念を抱くようになりました。問題は、何らかの理由で盲目になっている基本的なcss構文エラーである可能性があると感じ始めています。

編集2：

ナビゲーション バーの Lucius コードをマージしました。これにより、以前はコンパイルできなかった mixin が、特定の (未知ではあるが) 状況下で成功する可能性があることが明らかになりました。

関連するコード:
(「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"};
            }
        }
    }
}
4

2 に答える 2

0

エラーは、いくつかのタイプミス ( font-size -> font_size; box-sizing -> box_sizing) が原因でした。残念ながら、エラーが発生しなかったという事実のために、命名エラーの考えに頭を悩ませていました'font-size' is not in scope。-Haskell 関数名では as 減算が許可されていないため、パーサーは as 減算を見ていました。良い面としては、Yesod と Shakespeare の内部をよく知っているので、実際の問題を抱えている人々を助けることができれば幸いです。

于 2016-12-09T21:28:41.560 に答える