Less(CSS 扩展语言)

Less是一种CSS预处理器,它引入了变量、嵌套和混合等特性,使CSS编写更高效。通过lessc编译器,开发者可以将Less代码转换为浏览器可识别的CSS。在Node.js环境中,可以使用npm的less包来完成编译。文章强调了本地安装lessc而非全局安装的推荐做法,并鼓励读者尝试使用Less提升CSS开发体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

什么是Less?

Less是一种更加简洁的样式代码,它非常像CSS,但又不太一样,它让编写样式变得更容易

下面是css代码和Less代码的对比,它们都表达了一样的含义

在这里插入图片描述

Less代码虽好,但它无法被浏览器识别,因此需要一个工具将其转换为血统纯正的css代码

由于node环境具有读写文件的能力,于是在node环境中可以轻松的完成文件的转换

npm上有一个包叫做less,它运行在node环境中,通过它可以完成对Less代码的转换

可以看出,node环境在前端工程化中,充当了一个辅助的角色,它并不直接运行前端代码,而是让我们编写前端代码更加舒适便利,在后续的课程中,你还会不断的体会到这一点

转换代码,称之为编译(compile),转换代码的工具,称之为编译器(compiler)

体验Less

  1. 新建index.less文件,编写下面的less代码

    @green: #008c8c;
    .list {
      display: flex;
      flex-wrap: wrap;
      color: @green;
      li {
        margin: 1em;
        &:hover {
          background: @green;
          color: #fff;
        }
      }
    }
    
  2. 使用npm下载less

    less包提供了一个cli工具lessc,你可以有两种方案使用它

    方案一:全局安装less

    这种方案可以让你在任何终端目录使用lessc命令,但不利于版本控制

    方案二:本地安装less

    这种方案会把less安装到工程目录的node_modules中,你无法全局使用lessc命令,但可以在当前工程目录中使用npx lessc运行该命令

    npx是npm提供的一个小工具,它可以运行当前项目中安装到node_modules的cli命令

    如果配置package.json脚本,无须使用npx

    如果可以,应该尽量使用本地安装,而非全局安装

    如果可以,应该尽量使用本地安装,而非全局安装

  3. 使用lessc命令,对编写的less文件进行编译

    # 将 index.less 编译成为 index.css
    lessc index.less index.css
    
  4. 新建一个页面,引用编译结果index.css

目前,编写less代码会遇到一点小麻烦,就是每次编写后,都需要运行命令进行编译

这个麻烦只是暂时的,将来很快就可以解决

Less的核心语法

Less官网:https://lesscss.org/

Less民间中文网:https://less.bootcss.com/

Less提供了非常多的功能,帮助我们更加轻松的编写css代码

其中,我们最常用的功能有下面3个:

另外,你需要关注Less的特殊注释

小练习

1.编写一个less混合,实现绝对定位居中

2.将过去你所做的某个demo,将其css代码改造为less

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狡辉两门

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值