CSS 工具
一站式 CSS 工具箱：格式化/美化、压缩/精简、语法校验、把 SCSS/Sass 与 LESS 编译为 CSS，以及把 CSS 反向转换回 SCSS 或 LESS。
全部处理都在你的浏览器本地完成 —— 你的数据绝不会上传到任何服务器。
|
模式：
|
|
使用方法：把你的 CSS/SCSS/LESS/SASS 粘贴到左侧文本框，选择一种模式，然后点击处理（也可以直接输入 —— 输入时会自动处理）。
每种模式的工作方式
CSS 格式化：以统一的缩进（2 个空格、4 个空格或制表符）整理 CSS，每条声明占一行。能正确处理 @media、@keyframes、@supports 这类嵌套 at 规则。保留注释（/* */ 与单行注释皆可）。切换缩进下拉框即可在 2 空格、4 空格和制表符之间切换。
压缩：移除所有多余的空白、注释和冗余字符，得到体积最小的 CSS。非常适合部署到生产环境以减小文件体积和带宽占用。查看统计栏可以看到压缩比例。
校验：解析 CSS 并检查语法错误，报告错误时给出精确的行号与列号。同时显示统计信息：规则数、选择器数、声明数和 at 规则数。
SCSS 格式化：以统一的缩进重新整理 SCSS/Sass 样式表。支持全部 SCSS 专有语法：$variables、@mixin/@include、@extend、@if/@for/@each 控制流、#{$var} 插值，以及 // 单行注释。保留嵌套选择器结构并正确缩进嵌套块。切换缩进下拉框即可切换缩进方式。
LESS 格式化：以统一的缩进重新整理 LESS 样式表。支持全部 LESS 专有语法：@variables、参数化混入、守卫（when）、@{var} 插值、属性合并，以及 // 单行注释。保留嵌套选择器结构并正确缩进嵌套块。切换缩进下拉框即可切换缩进方式。
SCSS → CSS：使用官方 Dart Sass 编译器（v1.102）把 SCSS/Sass 样式表编译为普通 CSS。支持变量（$var）、嵌套、混入（@mixin、@include）、函数、@extend、@if/@for/@each 控制流，以及现代 Sass 模块（@use、@forward）。Sass 编译器（约 5.4 MB）会在你第一次使用该模式时才按需加载。
LESS → CSS：把 LESS 样式表编译为普通 CSS。支持变量（@var）、嵌套、混入、参数化混入、运算、函数、守卫和导入（@import）。编译器（约 150 KB）会在你第一次使用该模式时才按需加载。
SASS → CSS：使用 Dart Sass 把缩进式 SASS 语法（.sass 文件，没有花括号、没有分号）编译为普通 CSS。缩进式 SASS 用有意义的空白替代花括号，因此更简洁。SCSS 与缩进式 SASS 由同一个 Dart Sass 编译器（约 5.4 MB）处理。
CSS → SCSS：把标准 CSS 转换为 SCSS 语法，并自动做嵌套重构。会识别类 BEM 的命名模式，把 .parent-child 选择器收进 &-child 嵌套块；把后代选择器转成嵌套规则，把伪类选择器转成 &:state，并把重复出现的 CSS 自定义属性提取为 SCSS $variables。如果你的 CSS 结构扁平而重复，这个工具能帮你重构成更干净的嵌套 SCSS。
CSS → LESS：把标准 CSS 转换为 LESS 语法，并自动做嵌套重构。嵌套方式与 CSS→SCSS 相同：识别重复的父级模式、后代选择器和伪类；并把重复出现的 CSS 自定义属性提取为 LESS @variables。输出是干净、带嵌套的 LESS 代码。
层叠、优先级，以及样式为什么会打架
当多条规则指向同一个元素时，由优先级决定胜者：内联样式胜过 id，id 胜过类，类胜过元素选择器，源码顺序用来打破平局。!important 标记会推翻这套算术 —— 而且会让下一次覆盖变得更加困难。
优先级是按选择器分别计算的，而不是由上下文累加 —— 更具体的规则无论出现在样式表的哪个位置都会胜出。
