是否可以将 vscode 片段与 CSS 一起使用答案

【问题标题】：Is it possible to use vscode snippets with CSS是否可以将 vscode 片段与 CSS 一起使用
【发布时间】：2022-01-04 01:45:30
【问题描述】：

如果可能，我希望使用 vscode 上的 sn-p 函数制作 CSS 样板。我一直在 youtube 上寻找有关 sn-ps 的建议，大多数人在谈论它时都会想到 JavaScript。 Snippets 是一种我不熟悉的新语法，并且查看了文档，我仍然不清楚如何将它与其他语言一起使用。有一个创建 CSS sn-p 的选项，但它以 json 格式打开。

有人可以在这里提供任何建议吗？

非常感谢

【问题讨论】：

你可以为任何语言编写 sn-ps，特定的或所有语言的 sn-p，如果 sn-p 语法太复杂而你不开始编程

标签： css visual-studio-code code-snippets boilerplate

【解决方案1】：

我对 sn-ps 和 emmets 也有点陌生，我真的不知道有什么区别，但我可以把它包起来，让它对我有用。希望这对你也有帮助。

"todo":{
        "prefix": "todo",
        "body": ":root{\n\n    $1\n$1\n\n}\n\nhtml{\n    font-size: 62.5%;\n}\nbody{\n    font-size: 16px;\n}\n*{\n    margin: 0;\n    text-decoration: none;\n}\n\n/*****************************INICIO*****************************/\n\n$2\n$2\n$3"
    }

您只需在引号之间写下您的 emmet 的名称，然后写一个冒号并打开括号。

在前缀部分，你需要写下会让你的 emmet 出现的词。你可以有一个名为“main syntax”的emmet，你的前缀可能只是“main”，所以当你写main时，emmet就会出现。

body 部分是你写东西的地方，你的 emmet 会在你每次使用它时为你写东西。你写一次，所以你不必一遍又一遍地写。 :D

这里的语法很容易理解：

\n 会让你的文本出现在下一行。
$ 当你使用这个符号时，你所做的是你可以在它的空间中书写。您需要在符号 $1、$2、$3... 之后写一个数字你可以在任何你想要的地方添加一个。如果你添加多个 $1，你写的所有空格都会写相同的文本。当您按下标签按钮时，您会从 $1 更改为 $2，从 $2 更改为 $3

我修改了我经常使用的 emmet，所以你可以看到我在说什么。

其余的只是您使用的文本或代码。

您需要将代码粘贴到 css.json 文件中。要访问此文件，您需要打开命令面板，然后编写“>用户”并选择“首选项：配置用户片段”，然后单击查找“css.json”选项。最后，将代码粘贴在括号之间。

如果你想在前一个 emmet 之后添加一个新的 emmet，只需在你的 emmet 括号后添加一个逗号并开始编写你的新 emmet，就是这样。 :)

【讨论】：