从 CSS 文件中删除重复项答案

【问题标题】：Remove duplicates from CSS file从 CSS 文件中删除重复项
【发布时间】：2017-11-19 05:22:25
【问题描述】：

今天我尝试使用 SCCS 编译器 (http://leafo.net/scssphp/)，我爱上了这个工具，但我需要更多功能。

我生成了这样的压缩 CSS 文件：

html,body{height:100%;}html,body{height:100%;}html,body{height:100%;}@media all and (max-width:960px){body{height:80%;width:95%;}}@media all and (max-width:480px){body{height:100%;width:90%;}}nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}html,body{height:100%;}html,body{height:100%;}@media all and (max-width:960px){body{height:80%;width:95%;}}@media all and (max-width:480px){body{height:100%;width:90%;}}html,body{height:100%;}

解压文件：

html, body {
  height: 100%;
}
html, body {
  height: 100%;
}
html, body {
  height: 100%;
}
@media all and (max-width: 960px) {
  body {
    height: 80%;
    width: 95%;
  }
}
@media all and (max-width: 480px) {
  body {
    height: 100%;
    width: 90%;
  }
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
html, body {
  height: 100%;
}
html, body {
  height: 100%;
}
@media all and (max-width: 960px) {
  body {
    height: 80%;
    width: 95%;
  }
}
@media all and (max-width: 480px) {
  html, body {
    height: 100%;
  }
  body {
    height: 100%;
    width: 90%;
  }
}
html, body {
  height: 100%;
}

我在 PHP 的字符串变量中有这段代码，我需要删除重复项。这听起来很简单，array_unique 就是这样。当然。但我需要为普通 css 和每个媒体分别提供唯一的代码。所以我需要输出：

html, body {
  height: 100%;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
@media all and (max-width: 960px) {
  body {
    height: 80%;
    width: 95%;
  }
}
@media all and (max-width: 480px) {
  html, body {
    height: 100%;
  }
  body {
    height: 100%;
    width: 90%;
  }
}

所以这个脚本不会从@media all 和 (max-width: 480px) 中删除 html,body { height: 100% }，因为在这个媒体中是唯一的。

你能帮帮我吗？如果您可以将每个媒体查询放在文件末尾，我会很高兴。

【问题讨论】：

标签： php css media-queries unique substr

【解决方案1】：

你应该使用 CSS 优化，例如：https://github.com/GoalSmashers/clean-css

我建议你将 Grunt 与 scss 和 cleancss 插件结合使用，而不是使用 PHP 来解析你的 scss -> css，一旦你习惯了它就会更容易处理。

【讨论】：

不幸的是我只能使用 PHP :(