css - 将 SCSS 语法更改为 SASS 语法
问题描述
我想用 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
错误:预期的表达式。网格模板:
解决方案
这就是为什么我从不使用任何缩进语言的原因——当你尝试做一些不寻常的事情时,它们总是在可读性上失败——导致黑客试图改变语法。
像这样:
$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 :)
推荐阅读
- python - Django 管理员删除表单标签
- html - Google Charts API - 删除 RHS 上的空间?
- html - 使用 jpTimeMask 时,用户更新的值我们没有绑定到 ngModel 指令
- python - 问题:使用 Flask 时,从函数创建的全局变量不会在 HTML 模板中呈现
- flutter - 无效参数:在 URL 文件中未指定主机:///Trousers
- java - 如何在具有 4 个小数位的函数内返回双精度数据类型?
- django - localhost:8000 不起作用,但 127.0.0.1:8000 是 django
- kubernetes - 当我们将 Statefulset 升级到更新的镜像版本时会发生什么?
- python - Python 3:如何在两个日期范围内获得工作日
- javascript - 对整个网页的不同场景使用通用模态