Comment omettre la configuration dans VSCode pour utiliser rapidement Less

Cet article vous présentera comment utiliser Less dans VSCode en omettant la configuration. J'espère qu'il sera utile à tout le monde !

Moins

Pendant le processus de production de la page front-end, s'il y a de nombreux éléments dans la page et que la structure hiérarchique est plus complexe, le CSS que nous écrivons sera particulièrement redondant, et pas facile à entretenir. [Apprentissage recommandé : "vscode tutorielCSS特别的冗余，并且不容易进行维护。【推荐学习：《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"]

Donc pour CSS Il existe également de nombreuses extensions, telles que Less, Sass et d'autres préprocesseurs CSS. De manière générale, lorsque vous utilisez ces langages d'extension CSS, vous utiliserez d'abord npm pour les télécharger, puis les configurerez dans webpack.

🎜Bien que vous puissiez également importer moins directement dans le navigateur, vous devez d'abord introduire le 🎜plug-in clean-css🎜. 🎜🎜Mais si vous voulez le moyen le plus rapide d'utiliser less pour l'écriture de style, la façon dont j'ai trouvé est d'utiliser le plugin dans vs code et de laisser vs code vous aide directement à compiler un CSS. Cette méthode est aussi celle que j’utilise couramment maintenant. 🎜🎜🎜<span style="font-size: 18px;">Easy Less</span>🎜🎜🎜Ici, nous recommandons un plug-in appelé <code>Easy Less. 🎜🎜🎜🎜Easy Less peut prendre effet après avoir été installé directement dans le magasin d'extensions de vs code. Nous pouvons maintenant créer un fichier less, puis utiliser la méthode less pour y écrire du code de style. Après l'enregistrement, nous pouvons le trouver. au même niveau de less. Un fichier CSS du même nom sera généré dans le dossier. 🎜🎜🎜🎜Moins Contenu du fichier : 🎜rrreee🎜 Code CSS généré : 🎜rrreee🎜 De cette façon, lors de l'import de la page, vous pouvez directement importer ce fichier CSS sans avoir à faire de travail de conversion supplémentaire. En fait, dans vs code, il existe non seulement des outils simplifiés pour less, mais aussi des plug-ins d'outils pour sass si vous êtes intéressé. , vous pouvez également l'essayer. 🎜🎜Pour plus de connaissances sur la programmation, veuillez visiter : 🎜Introduction à la programmation🎜 ! ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!