在 CSS 和 LESS 中使用中划线和下划线的区别

在 CSS 和 LESS 中使用中划线和下划线的区别

在前端开发中，我们经常遇到使用 CSS 和 LESS 来开发样式的场景。在这两种样式语言中，我们经常看到开发者使用中划线和下划线来连接不同单词，如 font-size 和 font_size。那么这两种连接方式有什么区别呢？

在 CSS 中，中划线和下划线的使用是没有区别的。你可以根据你自己的喜好和习惯使用其中的任何一种来连接不同单词，比如 font-size 和 font_size 都是合法的：

p {
  font-size: 16px;
  font_size: 16px; /* 也是合法的语法 */
}

相比之下，在 LESS 中，中划线和下划线的使用是有很大区别的。这是因为 LESS 本质上是一种预处理器，它会将我们的 LESS 代码编译成 CSS 代码。在 LESS 中，我们使用中划线来连接不同单词，而使用下划线则是用来定义变量的，比如：

@font-size: 16px;
p {
  font-size: @font-size; /* 引用变量 */
}

在这个例子中，我们可以看到定义了一个名为 @font-size 的变量，其值为 16px。然后我们使用中划线来连接不同单词来定义样式，使用 @ 符号来引用变量。如果我们使用错误的下划线来定义变量，LESS 编译器就会报错：

@font_size: 16px; /* 错误的语法，会报错 */
p {
  font-size: @font_size;
}

因此，在 LESS 中，我们应该养成使用中划线来连接不同单词的习惯，而不是使用下划线。

总结

在 CSS 中，中划线和下划线的使用是没有区别的，你可以根据你自己的习惯来选择其中一种。但在 LESS 中，我们应该养成使用中划线来连接不同单词的习惯，而不是使用下划线。这样可以避免因为语法错误而浪费时间修复错误，提升开发效率。

参考代码

CSS：

p {
  font-size: 16px;
  font_size: 16px;
}

LESS：

@font-size: 16px;

p {
  font-size: @font-size;
}

@font_size: 16px; /* 错误的语法，会报错 */
p {
  font-size: @font_size;
}

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653f8c557d4982a6eb91c33e