代码之家 › 专栏 › 技术社区 › Toolbox

将scss语法更改为sass语法

css-grid sass css

Toolbox · 技术社区 · 6 年前

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

我到目前为止所做的努力。

萨斯语法:

.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

错误:应为表达式。网格模板:

1 回复 | 直到 6 年前

Jakob E 6 年前

这正是为什么我从不使用任何缩进语言“它们总是在可读性上失败,当你试图做任何一点不正常的”导致黑客试图弯曲语法。

这样地:

$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

推荐文章

delves · Sass不识别变量

2 年前

Nathan Huber · 如何在React 18中使用“useEffect”

2 年前

Janosz ÐÑÐ°ÑÐ¸ÑÐ½Ð¸Ðº · 如何瞄准这个i标签

2 年前

Henry · scss或css中的calc函数不起作用

2 年前

Nam Van · 如何在React中使用自定义主题颜色。js,CSS(SCSS)模块,Bootstrap5

2 年前

rook99 · 无法加载图标的字体

6 年前

Glen Elkins · SASS新手-不编译

6 年前

Toki · SASS在Sublime Text-Compile main中。保存任何@导入文件时的scss

6 年前

zed · 防止SCS编译CSS变量-Angular CLI

6 年前

sliptype · 使用Webpack提取CSS时抑制模块输出

6 年前