原生CSS终于支持嵌套了，Sass和Less还香吗
最近前端圈子里，好像到处都在说Tailwind CSS。走到哪都能听到“原子化CSS真香”、“不用起类名太爽了”。
Tailwind确实火，但千万别以为原生CSS已经被淘汰了。
实际上，在这个各种框架满天飞的时代，还有很多人在用原生CSS。大量老项目跑在上面，也有不少开发者就是喜欢原生，不想加一堆工具链。
而就在最近，原生CSS放了一个大招。
CSS嵌套正式成为标准
MDN官方发了一条消息：CSS嵌套现在已经是基线支持了。
什么意思？就是说从今往后，你不需要Sass，也不需要Less，直接用原生CSS就能写嵌套了。
以前写原生CSS，最烦的就是重复写选择器：
/* 以前这么写 */
.card { color: black; }
.card:hover { color: blue; }
.card .title { font-weight: bold; }现在可以这么写：
/* 现在这么写 */
.card {
color: black;
&:hover {
color: blue;
}
.title {
font-weight: bold;
}
}是不是清爽多了？
&符号是什么
上面代码里的&就是嵌套选择器。它代表父级选择器，也就是外面的.card。你可以拿它跟:hover、:focus这些伪类搭配，代码结构一下子就清晰了。
除了&，CSS嵌套也支持直接写子选择器，像上面.title那样，默认就是嵌套在里面。
跟Sass/Less有什么区别
以前用Sass或Less，主要图的就是嵌套和变量。现在原生CSS有了嵌套，变量的支持也挺好了，那预处理器还有必要吗？
区别还是有的。Sass和Less能做的远不止这些：
函数和混入：写复杂的样式逻辑，循环、条件判断这些，原生CSS暂时还不行
模块化：Sass的@use和@import比原生管理得更好
兼容性：老浏览器需要兼容的时候，预处理器能帮忙处理
但如果你项目不复杂，不想装一堆依赖，原生CSS现在确实够用了。
Tailwind用户需要在意吗
有人可能会说，我用Tailwind，原生CSS支不支持嵌套跟我有什么关系？
关系不大，但有一点值得想一下：Tailwind本质上是工具集，帮你快速写样式。但复杂组件里的特殊样式，或者那些Tailwind不好处理的地方，你可能还是得写原生CSS。这时候嵌套就有用了。
另外，如果你在做一个很小的页面，为了写几行样式去配一套Tailwind，确实有点重。这时候原生CSS就挺合适。
浏览器支持怎么样
MDN说的“基线支持”，意思是最新版本的主流浏览器基本都支持了。Chrome、Firefox、Safari、Edge的新版本都能跑。但如果你要兼容老浏览器，还是得用预处理器处理一下。
要不要换
分情况看。
如果你现在用Sass或Less用得好好的，项目也没啥问题，没必要急着换。预处理器能干的事比原生多不少。
如果你项目本身就不依赖预处理器，或者新项目比较轻量，可以试试原生CSS。少装一层工具链，开发体验确实更直接。
如果你是Tailwind用户，这个更新对你影响不大，但多了解一点也没坏处。
写在最后
CSS这么多年，一直在慢慢进步。嵌套这件事，开发者喊了很多年，现在终于原生支持了。
前端工具一直在变，今天火的框架，过几年可能就不流行了。但原生标准不一样，它走得慢，但走得稳。这次嵌套的加入，确实是原生CSS补上的一块短板。
不管你用不用，了解一下总没坏处。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
