我想为自己制作一个Less-sorting脚本。当我在textarea中输入Less Code并单击按钮时，p＃result应输出已排序的Less Code。
Less Code应按如下方式排序：
{
Mixins（它们都以“.mx”开头）
属性（按字母顺序排序）
}
的index.html：
<head>
<script src="jquery.min.js"></script>
</head>
<textarea id="input" style="width: 600px; height: 300px; resize: none;">
</textarea>
<p id="result" style="max-width: 600px; word-wrap: break-word;"></p>
<button>Sort</button>
<script src="jquery.sorter.js"></script>
jquery.sorter.js：
var result = "",
mixins = "",
properties = "";
$("button").on("click", function () {
var textarea = $('#input').val().split('\n');
function checkLine(position) {
var index;
for (index = position; index < textarea.length; ++index) {
var line = textarea[index].trim();
if (line.includes("{") === true)
{
result = result + mixins + "<br>" + properties + line + "<br>";
mixins = "";
properties = "";
checkLine(index + 1);
} else if (line.includes("}") === true)
{
result = result + mixins + properties + line + "<br>";
mixins = "";
properties = "";
break;
} else if (line.includes(".mx") === true)
{
mixins = mixins + line + "<br>";
} else if (line.includes(":") === true)
{
properties = properties + line + "<br>";
} else
{
result = result + "<br>";
}
console.log(index + ": " + mixins + " " + properties);
}
}
checkLine(0);
$("p#result").append(result);
$("button").hide();
});
如果我输入：
.frame {
color: blue;
background-color: white;
.mx-hello(white);
.framesecond {
font-size: 12px;
background: green;
.mx-test(white);
}
}
我应该至少得到这个输出:(我还没想到排序机制......：D）
.frame {
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
}
但是我得到了这个输出：
.frame {
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-hello(white);
color: blue;
background-color: white;
.framesecond {
.mx-test(white);
font-size: 12px;
background: green;
}
.mx-test(white);
font-size: 12px;
background: green;
}
我在Web开发公司工作。我的Less Code总是看起来有点乱，但我们有指导如何格式化我们的Code。如果我完成了一个项目我总是坐在那里一小时一小时只需重新安排Less Code。然后我心想：“我的问题必须有一个更简单的解决方案！”。所以我用谷歌搜索和谷歌搜索，没有任何真正的工作。然后我决定自己尝试一下，这就是为什么我在这里！
答案 0 :(得分：1)
我看了看它是否可以解决这个问题。看看这个：
Codepen：https://codepen.io/huppys/pen/VrbxLd?editors=1010
我用一些正则表达式替换了string.includes("something")，以便能够过滤掉一些不同类型的表达式。
Plus：属性得到排序。找到属性后，描述属性的字符串将被推送到数组中。在将找到的属性添加到输出字符串之前，它们会被排序。
附注：您使用什么IDE或编辑器编写LESS代码？可能它可以处理语法排序本身？