将 SCSS 语法更改为 SASS 语法答案

【问题标题】：Change SCSS syntax to SASS syntax将 SCSS 语法更改为 SASS 语法
【发布时间】：2019-01-16 15:06:19
【问题描述】：

我想用 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

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

【问题讨论】：

将所有内容写在一行中？
@karthick 我刚刚尝试过，它可以工作。然而，CSS 网格的可见结构非常糟糕，将所有内容都放在一行中。如果这是唯一的解决方案，我必须坚持将结构放在 SCSS 文件中。
关于这个github.com/sass/sass/issues/216 有一个未解决的问题，没有看到任何推荐的解决方案。除了评论github.com/sass/sass/issues/216#issuecomment-399026936
如果您需要这样做，只需转到 SassMeister 并让它为您转换。 sassmeister.com

标签： css sass css-grid

【解决方案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

【讨论】：