CSS预编译器 less工作原理

1,411 阅读1分钟

CSS预编译器

基本原理

编写css时,受限于css语言本身,常常难以处理一些问题:

  • 重复的样式值:例如常用颜色、常用尺寸
  • 重复的代码段:例如绝对定位居中、清除浮动
  • 重复的嵌套书写

由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题

其中一种方案,便是预编译器

预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为可被浏览器识别的传统css代码

CSS预编译器

目前,最流行的预编译器有LESSSASS,接下来介绍一下less

2020-02-03-11-48-45.png

less官网:lesscss.org/ less中文文档1(非官方):lesscss.cn/ less中文文档2(非官方):less.bootcss.com/ sass官网:sass-lang.com/ sass中文文档1(非官方):www.sass.hk/ sass中文文档2(非官方):sass.bootcss.com/

LESS的安装和使用

从原理可知,要使用LESS,必须要安装LESS编译器

LESS编译器是基于node开发的,可以通过npm下载安装

npm i -D less

安装好了less之后,它提供了一个CLI工具lessc,通过该工具即可完成编译

lessc less代码文件 编译后的文件

试一试:

新建一个index.less文件,编写内容如下:

// less代码
@red: #f40;

.redcolor {
    color: @red;
}

运行命令:

lessc index.less index.css

可以看到编译之后的代码:

.redcolor {
  color: #f40;
}

LESS的基本使用

具体的使用见文档:less.bootcss.com/

  • 变量
  • 混合
  • 嵌套
  • 运算
  • 函数
  • 作用域
  • 注释
  • 导入