less (一) less 的环境

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


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


前提:安装node 环境 ,了解 npm ,

第一步:全局安装 less

 上面我们就安装了less;


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



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文件;


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




第四步:这个时候我们就可以在文件中引入这个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 显示: 背景的样式已经成为我们设置的样式




总结: (1)  node 环境下使用npm 安装 less;

           (2)  lessc  sty.less  sty.css    这个是编译命令  将sty.less文件编译成 sty.css文件;

            (3) 我们使用的是  .css文件 ;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值