Maison > interface Web > tutoriel CSS > Comment afficher le CSS de sortie less.js

Comment afficher le CSS de sortie less.js

藏色散人
Libérer: 2020-12-21 09:39:56
original
2382 Les gens l'ont consulté

Comment afficher la sortie CSS de less.js : créez d'abord un nouveau document HTML et introduisez les fichiers less.js et main.less ; puis ouvrez le navigateur pour y accéder et enfin, appuyez sur F12 pour ouvrir [Outils de développement ; ] et sélectionnez l'élément DOM correspondant pour voir le code CSS compilé sur la droite.

Comment afficher le CSS de sortie less.js

L'environnement d'exploitation de ce tutoriel : système Windows 7, version moins2.6.0&&Chrome76.0&&CSS3. Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "Tutoriel vidéo CSS"

Comment vérifier la sortie CSS par less.js ?

Les étapes pour afficher le code CSS généré par less.js :

1 Tout d'abord, nous créons un nouveau document HTML et introduisons les fichiers less.js et main.less <.>

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet/less" href="main.less">
</head>
<body>
    <div class="app">app</div>
    <script src="less.min.js"></script>
</body>
</html>
Copier après la connexion

main.less

@width: 100px;
@height: 200px;
.app{
    width: @width;
    height: @height;
    background: skyblue;
}
Copier après la connexion

Remarque : modifiez l'attribut rel de la balise de lien en stylesheet/less

2. navigateur pour y accéder, appuyez sur F12. Ouvrez les outils de développement, sélectionnez l'élément DOM correspondant et vous pourrez voir le code CSS compilé à droite

Comment afficher le CSS de sortie less.js

Remarque : vous devez ajouter un index .html, main.less, less Le fichier .js doit être placé dans le serveur Web pour fonctionner (nous pouvons utiliser un logiciel associé pour créer un environnement Web local, phpStudy V8 est recommandé)

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal