css - 在 emacs 中缩进 CSS

Question

所以 emacs 的 CSS 自动缩进让我很生气。这是我喜欢 CSS 的样子：

#foo ul.bar {
    ....
}

    #foo ul.bar li {
        ....
    }

        #foo ul.bar li a {
            ....
        }

这就是emacs给我的自动缩进：

#foo ul.bar {
    ....
}

#foo ul.bar li {
    ....
}

#foo ul.bar li a {
    ....
}

如果他们使用级联，我喜欢让我的样式逐渐缩进。但是，emacs 会将所有内容自动缩进到同一级别。

有什么我能做的吗？

Answer 1

我建议你开始使用“Sass”编译你的 CSS——这些.scss文件看起来就像 CSS，但允许你按照你在示例中所渴望的方式嵌套规则，它会产生看起来非常漂亮的输出就像手工制作的 CSS 一样——所以，首先，你的 CSS 仍然是可以理解的；其次，如果你想放弃 Sass，你可以删除.scss文件并从那时起编辑.css文件。

而且 Emacs 已经完美地缩进了 Sass，因为 Emacs 只是遵守计算花括号数量并相应缩进的常规规则。您上面的源代码，如果转换为 Sass，将如下所示：

#foo ul.bar {
    ...

    li {
        ...

        a {
            ...
        }
    }
}

显然，这消除了重复并使您的 CSS 更易于阅读和维护。Sass 项目位于：http: //sass-lang.com/

Answer 2

我认为我在 Emacs 中使用的任何 CSS 模式都不会支持开箱即用的缩进样式——它们不查看选择器的内容，而只是查看某物是否是选择器（不要缩进）或者是选择器内的规则（缩进一步）。

如果你想改变它，你需要重写为你的 CSS 模式缩进的函数。

Answer 3

我知道这是一个 hack，但我已经看到 java-mode 或多或少地适用于 css。

Answer 4

您可以使用 emacs 内置标识。我可以在任何模式下工作，并且在 css 文件方面做得不错。

(defun cesco/indent () (interactive) (mark-whole-buffer) (indent-region (point-min) (point-max) nil) (pop-global-mark) )