Question

我想用Lucius或Cassius替换我的sass（scss格式）文件，但我遇到了问题。

我更喜欢空白敏感的卡修斯，但它的功能比卢修斯少。似乎没有mixin对Cassius的支持。这只是在Lucius。

Lucius中的mixin支持功能少于Sass。使用sass，mixins可以拥有属性和选择器。它基本上是一个带有可选替换的替换宏。有了Lucius，我只能使用属性。其他选择器被默默忽略。

这在Sass中是合法的：

@mixin addMarkup {
    color: #FF00CC;
    a {
        text-decoration: none;
        @include modifyParent;
    }
}

@mixin modifyParent {
    &.some-class { float: right };
}

body {
    @include addMarkup;
}

转换为：

body { color: #FF00CC; }
body a { text-decoration: none; }
body a.some-class { float: right; }

有没有一种简单的方法可以用Lucius替换这种语法？ Lucius可以处理第一个mixin的第一行，但它默默地忽略了其他行。在第二个混音中，我没有看到一个简单的方法来取代'＆amp;'它指的是父选择器，因此您可以在选择器中重用属性。

我在Lucius试过这个。

{-# LANGUAGE QuasiQuotes #-}
import Text.Lucius
import qualified Data.Text.Lazy.IO as TLIO
renderer = undefined
addMarkup =
    [luciusMarkup|
        color: #FF00CC;
        a {
            text-decoration: none;
            ^{modifyParent}
        }
    |]

modifyParent =
    [luciusMixin|
        .some-class {
            float: right;
        }
    |]

myCss =
    [lucius|
        body {
            ^{addMarkup}
        }
    |]

main = TLIO.putStrLn $ renderCss $ myCSS renderer

但它只显示

body{color:#FF00CC}

Answer 1

在Lucius中，可以将一组CSS属性创建为mixin，并在多个声明中重用。所以，当你想重用一些属性时，我会这样做：

对要重复使用的一组属性进行分组。使用luciusMixin将其创建为mixins。
将mixins添加到lucius quasiqouter中所需的适当位置。

此代码将生成您所需的CSS。

{-# LANGUAGE QuasiQuotes #-}
import Text.Lucius
import qualified Data.Text.Lazy.IO as TLIO

renderer = undefined

colorMixin = [luciusMixin|
              color: #FF00CC;
|]

anchorMixin = [luciusMixin|
               text-decoration:none;
|]

floatMixin = [luciusMixin|
              float:right;
              |]

myCSS =
    [lucius|
        body {
          ^{colorMixin}
          a {^{anchorMixin}}
          a.some-class { ^{floatMixin}
}
   } |]

main = TLIO.putStrLn $ renderCss $ myCSS renderer

想用Lucius或Cassius取代Sass但遇到问题

1 个答案: