预处理器 Less 的十个语法

Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

不过浏览器只能识别 CSS 语言,所以 Less 语言直接运行在浏览器端是不被识别的,需要我们通过一些方式将其先转成 CSS,再将 CSS 资源加载到浏览器中。

如何转换

根据使用场景不同,我们可以分别采用包管理工具/CDN资源的形式。

包管理工具

nodejs + webpack
在工程化项目中,我们使用 webpack 来对项目进行编译时,可以在 module 中定义处理 Less 资源的方式,本质上是使用 Less 工具来对 Less 资源进行转换,但 webpack 中是使用对应的 loader 来处理(需要安装 less、less-loader)。

nodejs + gulp
gulp 以流的形式执行定义的任务,它处理 Less 资源除了 less 工具,还需要安装 gulp-less 。

nodejs + vite
vite 中不需要多做任何配置,只需安装 less 工具。

CDN资源

当不适合使用包管理工具时,可以直接引入CDN的LESS编译代码,对LESS进行实时的处理。

<link rel="stylesheet/less" href="./basic.less"> 
<script src="https://cdn.jsdelivr.net/npm/less@4"></script>

这里需注意的是,link标签定义的 rel 需要是 stylesheet/less,这样后面的js资源才会将Less语法处理成CSS。

  • rel="stylesheet",会主动发送http请求获取css资源
  • rel="stylesheet/less",不会发送http请求
  • rel="stylesheet/less" + 处理less的js资源,先请求js文件,再发送获取stylesheet的css资源

Less转CSS预览

官方提供了可在线预览Less转CSS代码的工具(Less-preview),在这里可以看到每个语法到底做了怎样的转化,了解后更能按照自己所需要的场景选择。

语法

有了Less资源的处理工具后,可以开始放心大胆的编写Less语法啦~

一、兼容css
Less 是完全兼容 CSS 的,所有 CSS 代码都可以编写,导入的方式和 CSS 的用法是一致的,导入一个 .less 文件,此文件中的所有变量就可以全部使用,如果导入的文件是 .less 扩展名,则可以将扩展名省略掉。

二、使用变量
有些常用的主题色、字体,我们可能会使用一个固定的类名,当需要使用的时候在标签上叠加类名,这样使得类名很多,通过变量的形式,无需再多次添加类。

两种方式达到的效果是一致的,但是 Less 语法可维护性更强一些。

三、嵌套
CSS 中语法不能嵌套,为了保证代码的可阅读性,我们需要按照一定的顺序将样式依次从父元素定义到子元素,但在 Less 中就没有这个困扰,像层层包裹的形式来书写,可以清晰的看到父子级关系。

四、运算
运算这个功能不算好用,并不会像函数一样,比较“智能”的转换成我们需要的结果,比如设置高度,它没有进行单位转换,只是保留第一位的单位,再简单的加减乘除。

五、混入/混合
混入/混合 可以将多个css属性合成一组值(比如设置一行展示,超出长度显示省略号的样式),插入到其它选择器中。通过选择器加上小括号的形式使用,括号内也可以接受参数。

Less编写看起来是代码量变多,但使用起来却是更加灵活,能将它作为一个组合来使用,随意放置到所需要的地方。

六、映射
将混合、映射结合起来使用,可以弥补Less中不能自定义函数的缺陷,比如可以获取混入中定义的宽度,定义px转换rem的函数。

七、继承
语法:&:extend(选择器),生成的代码与混入不同,混入是直接将代码加到后面,继承用的是并集选择器。

开发中用混入更多,因为混入更灵活、语法更简洁、直接插入后面生成的css语法阅读性更强。

八、内置函数
除了 CSS 本身就有的 linear-gradient、calc、rgba,Less 还拓展了一些函数,比如颜色转换 color,数组取值 extract,条件判断 if,向上取整 ceil。

九、作用域
在查找一个变量时,首先在本地查找变量和混合, 如果找不到,则从“父”级作用域继承。

十、注释
在css中,只能使用块注释,在Less中,块注释和行注释都可以使用。

以上就是 Less语法 的介绍, 通过 Less,我们可以编写出更优雅、可读性更强、更易维护的 CSS 代码。下一篇将介绍 SASS的相关使用,更多有关 前端CSSJavaScript 的内容可以参考我其它的博文,持续更新中~

posted @ 2023-04-02 20:59  一颗冰淇淋  阅读(60)  评论(0编辑  收藏  举报