今天我尝试使用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%;
}
}
所以这个脚本不删除html,body {height: 100%}从@media all和(max-width: 480px),因为在这个媒体是唯一的。
你能帮我吗?如果你能把所有的媒体查询放在文件的末尾,我会很高兴的。
你应该使用如下的css优化:https://github.com/GoalSmashers/clean-css
,我建议你将Grunt与scss和cleanss插件结合使用,而不是使用PHP来解析你的scss -> css,一旦你习惯了它,处理起来要容易得多。