Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

分分钟解析嵌套的 css

  以前我们就经常喷 css 不支持嵌套的写法,后来写惯了 scss 之后觉得,如果 css 没有嵌套功能那是一件不能忍的事情。其实,scss 的嵌套处理并不是什么高端技术。如果不考虑字符和 css3 的一些特殊写法,css 嵌套的解析是一件非常简单的事情,一个正则替换就可以搞定。
  下面就是一个最简单的 demo
<style type="text/x-nested-css"> div { color: green; div { color: red; } } </style> <div> aa <div>bb</div> </div> <script> [].forEach.call( document.querySelectorAll('style[type="text/x-nested-css"]'), element => { let styleSheet = element.innerHTML; // Flatten Core let tmp; while (tmp !== styleSheet) { styleSheet = (tmp = styleSheet).replace(/(([^{};]+)\{[^{}]*?)([^{};]+\{[^{}]*?\})/, '$2 $3$1'); } element.innerHTML = styleSheet; // Change type to text/css and reinsert element.setAttribute('type', 'text/css'); let parent = element.parentNode; let next = element.nextSibling; parent.removeChild(element); parent.insertBefore(element, next); } ); </script>   别看上面有这么一大坨代码,实际上核心代码只有中间几行。后面的一坨解决的是动态修改 STYLE 元素的 type 属性无法直接生效,需要先取出文档再重新插入。
  中间的正则是将这样的格式 xxx{yyy{zzzz}   替换成 xxx yyy{zzzz}xxx{   并且不断重复这件事,直到没有满足匹配的项。
  其实这个方式的性能并不好,只是因为它简单,几行代码就能搞定而已。而且对字符串中包含大括号的情况没有处理,以及 css3 中本来就有的大括号嵌套的情况没有处理,所以要想真正实现好可能就需要更高端的 css 语法分析器。但把语法分析器丢进来会大大增加代码量,所以其实如果针对一般的情况只要对字符串和 css3 的特殊规则做一波处理即可。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^