新手如何将less文件转换成css文件

less是预处理css,使我们写css更方便快速,它类似于css和js的结合体,有js的特征但写出来是css。less的学习成本几乎为0 ,只要你会写css就会写less。下面是如何将less文件转换成css文件:

  1. Less官网:http://lesscss.org/

  2. Less中文网:(结合以下两个网站看)

准备工作:
less是基于node环境,所以使用less必须安装node环境。
node环境安装可以参考这里:Node环境安装

  1. 在项目根目录中的css文件夹中新建main.less文件并写好(根据需要命名文件,后缀必须是.less。例如:base.less )。
  2. 在less文件根目录中(就是css文件夹内)
    ①Shift+鼠标右击 打开命令小黑窗口
    这里写图片描述
    ②输入: lessc+空格+less文件名 如:lessc main.less 控制台会把编译的css输出
    这里写图片描述
    ③命令行输入: lessc+空格+less文件名+空格+大于号+空格+css文件名
    例如:lessc main.less > main.css
    在css文件夹中会多一个css文件,即转换完成
    这里写图片描述
    效果图如下:
    这里写图片描述
  • 3
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值