So lassen Sie die Konfiguration in VSCode weg, um Less schnell zu verwenden

In diesem Artikel erfahren Sie, wie Sie Less in VSCode verwenden, indem Sie die Konfiguration weglassen. Ich hoffe, dass er für alle hilfreich ist!

Weniger

Wenn während des Produktionsprozesses der Front-End-Seite viele Elemente auf der Seite vorhanden sind und die hierarchische Struktur komplexer ist, schreiben wir CSS Besonders überflüssig und nicht einfach zu warten. [Empfohlenes Lernen: „vscode TutorialCSS特别的冗余，并且不容易进行维护。【推荐学习：《vscode教程》】

所以对于CSS也有不少的扩展，比如Less,Sass等CSS预处理器。

一般而言，在使用这些CSS扩展语言时，会先使用npm进行下载，然后在webpack当中进行配置使用。

虽然也可以直接导入less到浏览器中，不过要先引入clean-css 插件。

但是如果想要以最快的方式使用less进行样式编写，我找到的方法是使用vs code中的插件，让vs code直接帮你编译完成一个css。这种方式也是我目前比较常用的。

Easy Less

这里推荐一款叫做Easy Less的插件。

Easy Less直接在vs code的扩展商店中安装后即可生效，现在我们可以创建一个less文件，然后在里面使用less的方式编写样式代码，保存后即可发现在less同级文件夹中会生成一个相同名称的css文件。

Less文件中内容：

@setColor:{
    1: #ff0000;
    2: #ff0;
    3: #f0f;
    4: #0ff;
    5: #00f;
}
#app {
    .ul {
        each(@setColor, {
            .li@{key} {
                background-color: @value;
                width: 100px;
                height: 20px;
            }
        })
    }
}

生成的CSS代码：

#app .ul .li1 {
  background-color: #ff0000;
  width: 100px;
  height: 20px;
}
#app .ul .li2 {
  background-color: #ff0;
  width: 100px;
  height: 20px;
}
#app .ul .li3 {
  background-color: #f0f;
  width: 100px;
  height: 20px;
}
#app .ul .li4 {
  background-color: #0ff;
  width: 100px;
  height: 20px;
}
#app .ul .li5 {
  background-color: #00f;
  width: 100px;
  height: 20px;
}

这样在引入页面时，就可以直接引入此CSS文件，而不必做多余的转换工作了。 其实在vs code当中，不止有less的简化工具，sass"]

Also für CSS Es gibt auch viele Erweiterungen, wie zum Beispiel Less, Sass und andere CSS-Präprozessoren. Wenn Sie diese CSS-Erweiterungssprachen verwenden, müssen Sie diese im Allgemeinen zuerst mit npm herunterladen und sie dann im webpack konfigurieren.

🎜Obwohl Sie weniger auch direkt in den Browser importieren können, müssen Sie zunächst das 🎜Clean-CSS-Plug-In🎜 einführen. 🎜🎜Aber wenn Sie less am schnellsten für das Schreiben von Stilen verwenden möchten, ist die Methode, die ich gefunden habe, die Verwendung des Plugins in vs code und let vs code hilft Ihnen direkt beim Kompilieren eines CSS. Diese Methode verwende ich mittlerweile auch häufig. 🎜🎜🎜<span style="font-size: 18px;">Easy Less</span>🎜🎜🎜Hier empfehlen wir ein Plug-in namens <code>Easy Less. 🎜🎜🎜🎜Easy Less kann nach der Installation direkt im Erweiterungsspeicher von vs code wirksam werden. Jetzt können wir eine Less-Datei erstellen und dann den Stilcode darin schreiben Im Ordner wird eine CSS-Datei mit demselben Namen generiert. 🎜🎜🎜🎜Weniger Inhalt in der Datei: 🎜rrreee🎜 Generierter CSS-Code: 🎜rrreee🎜 Auf diese Weise können Sie beim Importieren der Seite diese CSS-Datei direkt importieren, ohne zusätzliche Konvertierungsarbeiten durchführen zu müssen. Tatsächlich gibt es in vs code nicht nur vereinfachte Tools für less, sondern auch Tool-Plug-Ins für sass , Sie können es auch ausprobieren. 🎜🎜Weitere Kenntnisse zum Thema Programmierung finden Sie unter: 🎜Einführung in die Programmierung🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo lassen Sie die Konfiguration in VSCode weg, um Less schnell zu verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!