Question

我想用SASS语法在CSS网格下面编写。当前，它仅适用于SCSS语法。使用SASS语法，我想减少[{]和[;]，因为SASS在编译期间/之后会自动添加这些字符。

SCSS语法：

.wrapper {
    display: grid;
    grid-template:
    "logo-pic topbar-1"        80px
    "logo-pic topbar-2"        60px
    "navigation navigation"    60px
    "content content"          400px
    "bottom-bars bottom-bars"  80px
    / 250px 1fr;
}

到目前为止我尝试过的。

SASS语法：

.wrapper
    display: grid
    grid-template:
    "logo-pic topbar-1"        80px
    "logo-pic topbar-2"        60px
    "navigation navigation"    60px
    "content content"          400px
    "bottom-bars bottom-bars"  80px
    / 250px 1fr

错误：期望的表达式。网格模板：

Answer 1

这就是为什么我从不使用任何缩进语言的原因-当您尝试做一些与众不同的事情时，它们总是在可读性上失败–导致黑客尝试改变语法。

赞：

$a:       (    "logo-pic topbar-1"        80px)
$a: append($a, "logo-pic topbar-2"        60px)
$a: append($a, "navigation navigation"    60px)
$a: append($a, "content content"         400px)
$a: append($a, "bottom-bars bottom-bars"  80px)
$a: append($a, / 250px 1fr)

.wrapper
    display: grid
    grid-template: $a

...为什么（您可能已经猜到了）我建议您使用SCSS ：）

PS。 https://github.com/sass/sass/pull/2094

将SCSS语法更改为SASS语法

1 个答案: