less （一） less 的环境

川长思鸟来 2022-05-25 22:59 284阅读 0赞

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；

下面看看如何配置 less 的使用环境；

前提：安装node 环境 ，了解 npm ,

第一步：全局安装 less

![70][]

上面我们就安装了less;

第二步：我这里在 f 盘下创建了一个 less 文件夹，文件夹里面有两个文件  index.html   sty.less

![70 1][]

index.html

<!doctype html>

< html>

< head>

< meta charset= "utf-8">

< title>less第一步</ title>

</ head>

< body>

开始使用 less 的第一步

</ body>

</ html>

sty.less

//@bg-color 的意思是定义一个变量bg-color

@bg-color: \#ffccdd;

body\{

//设置背景颜色为上面的变量

*background-color*:@bg-color;

\}

第三步：上面我们写好了less 文件，但是不能直接使用，所以下一步通过命令把 sty.less 编译成 sty.css文件；

![70 2][]

编译完成再来看看我们的文件夹下就出现了一个 sty.css文件，

![70 3][]

第四步：这个时候我们就可以在文件中引入这个sty.css文件了；

<!doctype html>

< html>

< head>

< meta charset= "utf-8">

< title>less第一步</ title>

< link rel= "stylesheet" href= "sty.css">

</ head>

< body>

开始使用 less 的第一步

</ body>

</ html>

浏览器打开index.html 显示： 背景的样式已经成为我们设置的样式

![70 4][]

总结： （1）  node 环境下使用npm 安装 less；

（2）  lessc  sty.less  sty.css    这个是编译命令  将sty.less文件编译成 sty.css文件；

（3） 我们使用的是  .css文件 ；

[70]: /images/20220526/7c0d27f026734559908db204bff63142.png
[70 1]: /images/20220526/79b6c14bcca94b4cbe019289514cf5df.png
[70 2]: /images/20220526/c0c6ea3ef734448aa732bdaf09683a33.png
[70 3]: /images/20220526/7bc5855a093b4dc597686629535141a2.png
[70 4]: /images/20220526/160eaab047f9435496152649d9f4bfd4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less预处理——初识Less

系列文章目录 -------------------- 文章目录系列文章目录一、Less 简介二、安装 Easy LESS

男娘i/ 2023年09月27日 11:44/ 0 赞/ 109 阅读

相关 less

less > less可以说是动态化的css语言，主要是因为他的代码可以复用 less的使用: 1. 在全局npm 安装less ，并执行`lessc less文件

缺乏、安全感/ 2023年01月07日 01:23/ 0 赞/ 171 阅读

相关 vue lang=“less“ less

文章目录 vue引入lang=“less“的方法以及报错的解决方案第一步：安装 less 和less-loader

客官°小女子只卖身不卖艺/ 2023年01月03日 14:17/ 0 赞/ 242 阅读

相关 less环境搭建及VScode使用less（详细教程）

less安装步骤 1、下载安装node.js 2、下载安装less 3、打开VScode软件安装插件 Easy LESS 4、编辑保存.less文件，会在对应

梦里梦外;/ 2022年12月03日 13:00/ 0 赞/ 584 阅读

相关 less笔记-less概要

一、概要 As an extension to CSS, Less is not only backwards compatible with CSS, but the ex

刺骨的言语ヽ痛彻心扉/ 2022年09月25日 13:22/ 0 赞/ 265 阅读

相关 LESS详解之编译LESS

　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

╰+攻爆jí腚メ/ 2022年09月17日 13:11/ 0 赞/ 460 阅读

相关 less的使用介绍（一）

Less 类似的预处理css语言还有 Sass styuls等等 > 一款比较流行的预处理CSS，支持变量、混合、函数、嵌套、循环等特点 > [官网][Link

àì夳堔傛蜴生んèń/ 2022年06月13日 08:40/ 0 赞/ 180 阅读

相关 less （一） less 的环境

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；下面看看如何配置 less 的使用环境；前提：安装node

川长思鸟来/ 2022年05月25日 22:59/ 0 赞/ 285 阅读

相关安装less环境

LESS 是动态的样式表语言，它能让CSS 的工作变得非常简单。安装过程如下：安装有两种方法安装：第一种是找到：C盘/-----------Users----

曾经终败给现在/ 2021年11月29日 23:44/ 0 赞/ 394 阅读

相关 less

[预处理器][Link 1]就是在代码交给编译器处理前，预先进行一些处理 less要点：变量，混合，嵌套，函数&运算，扩展 1.链接 <link re

ゞ浴缸里的玫瑰/ 2021年09月16日 04:42/ 0 赞/ 464 阅读