无Javascript分拣机问题:_Javascript_Jquery_Sorting_Less

无Javascript分拣机问题:

javascript jquery sorting less

无Javascript分拣机问题:,javascript,jquery,sorting,less,Javascript,Jquery,Sorting,Less,我想为自己制作一个排序更少的脚本。当我在文本区域输入较少的代码并单击按钮时，p#result应该输出排序较少的代码较少的代码应按如下方式排序： { mixin（它们都以“.mx”开头）属性（按字母顺序排序） } 以下是我到目前为止得到的信息： index.html： <head> <script src="jquery.min.js"></script> </head> <textarea id="i

我想为自己制作一个排序更少的脚本。当我在文本区域输入较少的代码并单击按钮时，p#result应该输出排序较少的代码

较少的代码应按如下方式排序：

{
mixin（它们都以“.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>

我至少应该得到以下输出：（我还没有想到排序机制…：D）

但是我得到这个输出：

.frame {
    color: blue;
    background-color: white;
    .mx-hello(white);
    .framesecond {
        font-size: 12px;
        background: green;
        .mx-test(white);
    }
}

.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;
}

背景-故事：我在一家网络开发公司工作。我的Less代码看起来总是有点凌乱，但我们有如何格式化代码的指导原则。如果我完成了一个项目，我总是一个小时一个小时地坐在那里，只是重新安排更少的代码。然后我想：“一定有一个更简单的办法来解决我的问题！”。所以我搜索了又搜索，但什么都没用。然后我决定自己试试，这就是我来这里的原因

我希望你理解我的问题，如果有不清楚的地方请告诉我，这样我就可以编辑我的问题了！（我不太擅长javascript，所以非常感谢您的帮助！：D）我看了一下，看看是否能解决这个问题。看看这个：

代码笔：

我用一些正则表达式替换了

字符串。includes（“something”）

，以便能够过滤某些不同类型的less表达式

另外：属性得到排序。在找到一个属性后，描述该属性的字符串将被推送到数组中。在将找到的属性添加到输出字符串之前，将对它们进行排序

旁注：您使用什么IDE或编辑器来编写更少的代码？也许它可以处理语法排序本身？

是什么阻止了你使用排序函数？这个函数是什么？好的，我会写一个答案解释它。实际上，没关系。我就这么说吧。为什么不使用

style--fix

我使用Eclipse。。。你知道Eclipse中的一个特性吗…？我对Eclipse不太熟悉，但我发现了一个专用的。那可能对你有帮助。非常感谢！另外，你的代码笔代码片段工作得很好！

.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;
}