用现代CSS替换Less
相信不少人（前辈，或者说老人）都领教过写CSS的痛苦。下面有一张5年前发布在reddit上的CSS梗图：
一个胖子在努力地调整窗帘，可惜无论他怎么努力，窗帘都无法按照他的想法来调整。经过一番折腾后，实在忍无可忍，他一把扯掉了整个窗帘。可见在早期写CSS是多么让人抓狂。
好消息是开源社区做了很多工作来帮助开发者提高效率，降低写CSS的痛苦。比如出现了Less、Sass等工具。
更大的好消息是现在（2026年），我们可以使用原生CSS来解决问题，毕竟，用Less、Sass等工具需要额外的转译和配置。
对于中小型项目而言，我认为最需要的是下面几种功能，尤其是嵌套和变量。
嵌套
我们来看一个例子：
<div class="parent">
<div class="child">child</div>
</div>上面是一个简单的父子元素，我们来设置它们的样式：
.parent {
background: #ddd;
padding: 10px;
}
.parent .child {
font-weight: bold;
}
.parent .child:hover {
color: orange;
}
.parent .child::before {
content: '*';
}看见没，一个parent需要写4次，一个child需要写3次，并且各自之间的关系也不明确。如果代码量很少的情况下，还可以忍受。但是规模一旦起来，冗余元素就非常多，写起来贼难受，阅读起来也难受。
CSS 在2023年引入了css nesting，这个功能本应该在很早就推出来的。虽迟但到，有这个功能后，我们可以按层级编写样式：
.parent {
background: #ddd;
padding: 10px;
.child {
font-weight: bold;
&:hover {
color: orange;
}
&::before {
content: '*';
}
}
}立马清爽了不少。这个功能解决了层级书写繁琐的问题，可以说是非常刚需。
变量和引入
另外一个就是变量功能，这个功能在动态主题上非常刚需。如果网站要设置Dark模式和Light模式多种主题，如果有变量，会方便不少。
这里以Less为例。比如，在var.less文件中定义一个变量：
@link-color: #04c9d7;然后，在其他less文件中引入这个var.less文件，就可以使用这个变量了：
@import '../common/var.less';
a {
color: @link-color;
}用现代CSS来做的话，首先，在var.css文件中定义变量：
:root {
--link-color: #04c9d7;
}和Less不同，CSS 变量必须依附在某个选择器上，所以，这里使用了:root，表示最高级别的选择器，代表整个文档的根元素，相当于告诉浏览器"这些变量在整个页面都可以使用"。当然，你也可以将变量定义在其他DOM元素或其他选择器上。
CSS变量的命名以--开头。
然后，在其他css文件中引入并使用：
@import '../common/var.css';
a {
color: var(--link-color);
}var() 是 CSS 的原生函数，专门用来读取 CSS 变量的值。这么看来，感觉比Less的变量定义更加清晰。
混入
最后一个是混入（Mixins）。
混入是将一组属性从一个规则集混入到另一个规则集的方法。假设我们在less文件中定义一个规则集：
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}我们希望在其他规则集中使用这些属性。只需在使用这些属性的类名后面加上类名即可，像这样：
#menu a {
color: #111;
.bordered();
}这种方式也可以减少我们的CSS冗余代码。
可惜，目前CSS无法做到，但是 W3C 草案（CSS Functions and Mixins Module）已经在往这个方向发展了。
但这个功能实际开发用的不多。另外，即便没有这个功能，也可以通过其他方式间接实现。所以，倒没有那么刚需。