从 devtools 复制 CSS 复制空格

Posted 2023-03-06

【中文标题】从 devtools 复制 CSS 复制空格

【英文标题】：Copying CSS from devtools copies spaces

【发布时间】：2015-08-15 02:38:12

【问题描述】：

我的 CSS 工作流程通常包括我在 devtools 中四处游荡，在浏览器中添加/更改 CSS，当值符合我的需要时，我复制 CSS 并将其粘贴到我的 .scss 文件中。

现在我复制的 CSS 包含 spaces 用于格式化。

Chrome 中的 CSS

div 
    width: 100%;
    background-color: yellow;

在编辑器中复制代码

现在，当我复制属性 (width & background-color) 并将其粘贴到我的编辑器中时，我将其复制如下：

..width: 100%;
..background-color: yellow;

（dots表示空格）

有没有办法复制CSS 没有空格，像这样：

width: 100%;
background-color: yellow;

每次我粘贴 CSS 时都会弄乱我的格式，因此我会做很多不必要的格式。 （就像我使用制表符而不是空格时删除空格）

我知道空格是几个月前添加的，在您复制没有空格的 CSS 之前。

【问题讨论】：

试试 snappysn-p？ chrome.google.com/webstore/detail/snappysnippet/…来自这个问题/答案：***.com/questions/4911338/…

框外建议-您可以将代码复制到excel中并修剪所有代码-这样可以快速消除所有空格，然后您可以将其复制粘贴到代码编辑器中吗？

我更希望更改我的 CSS 从 devtools 复制的设置，我真的不想打开像 excel 这样的额外程序。我也可以在我的编辑器中使用find/replace，但这也是额外的“工作”

关于 snappysn-p: 看起来是一个很酷的工具，但用于其他工作。我的大部分 CSS 已经在我的 .file 中，我只是复制了一些我想保存在 .file 中的 CSS。不是整个街区:)

格式化是有目的的 - 如果您选择整个规则（包括选择器和大括号）并粘贴到文本编辑器中，它将看起来完美格式化并带有正确的缩进。

【参考方案1】：

我也在寻找这个，我发现最接近的是在 Chrome 开发者工具 > 设置 > 源 > 默认缩进。不幸的是，没有零空格选项。

【讨论】：

谢谢伙计，这真的是最接近我所希望的了！如果有 0 缩进的选项，它会在这里:)。但至少您可以在制表符和空格之间进行选择：D:D

我可能只是在 chrome 上提交一个功能请求，要求 0 个空格

【参考方案2】：

在大多数编辑器中，它很简单：Ctrl-A 然后 Shift-Tab。

【参考方案3】：

如果没有这些空格，则无法从样式检查器中复制。

一种解决方法是点击样式附近的样式表名称，在Sources选项卡中打开css， 然后按 Shift+Tab 将所需代码左对齐，然后复制。