二十、预处理css的less -凯发k8官方网

@author：runsen
@date：2020/5/31

作者介绍：runsen目前大三下学期，专业化学工程与工艺，大学沉迷日语，python， java和一系列数据分析软件。导致翘课严重，专业排名中下。.在大学60%的时间，都在csdn。

本文接着上面bootstrap，本想进入ajax的，但是发现less好像忘记了。

文章目录

• less
• 变量使用
• 编译less

less是css的预编译语言，可以让编写css的过程更加简单、高效、快捷，让一沉不变的css充满活力和生机。有的时候，多次出现的相同属性，这样代码很多，就需要重整。

这样 less预处理css就拉了，比如经常出现下面的css代码

#test1 {color: #fff; }#test2 {color: #fff; }

整个项目中可能会出现n个相同的color，维护起来非常麻烦。less使用“变量”解决了这个问题！

@white: #fff; // 使用@定义一个变量#test1 {color: @white; // 引用变量 }#test2 {color: @white; // 引用变量 }

还能使用一些简单的运算符，让任何数字，甚至颜色都可以进行运算，这些和javascript一样的。

@length: 5px 5; // 这样变量就被赋值为 10px @doublelength: @length * 2; // 变量 * 2 @addlength: @length @doublelength; // 变量之间相加 #test {color: #888 / 4; // 颜色运算height: (@length 5) * 2; // 使用括号进行优先级运算border: (@length 1) solid red; // 使用在多参数属性中 }

less 的编译指的是将写好的 less 文件 生成为 css 文件。先去w3c的less教程偷窥一下。

下面就是安装less，需要安装node先，具体的看w3c。

c:\users\yiuye>npm install -g less d:\nodejs\node_global\lessc -> d:\nodejs\node_global\node_modules\less\bin\lessc less@3.11.1 added 60 packages from 123 contributors in 33.704s╭────────────────────────────────────────────────────────────────╮│ ││ new minor version of npm available! 6.4.1 -> 6.14.5 ││ changelog: https://github.com/npm/cli/releases/tag/v6.14.5 ││ run npm install -g npm to update! ││ │╰────────────────────────────────────────────────────────────────╯c:\users\yiuye>lessc lessc: no input files usage: lessc [option option=parameter ...] <source> [destination]

在 less 所在的路径下，输入 lessc xxx.less，即可编译成功。或者，如果输入 lessc xxx.less > ..\xx.css，表示输出到指定路径。

除了less，还有比如sass都是一回事，先水一篇。毕竟这个less没必要深入研究，因为后面vue会完成的。

总结

以上是凯发k8官方网为你收集整理的二十、预处理css的less的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。