@Author：Runsen
@Date：2020/5/31

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

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

文章目录

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 的编译指的是将写好的 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会完成的。

二十、预处理CSS的LESS相关推荐

二十款漂亮的CSS字体样式，让你受用非浅
二十款漂亮的CSS字体样式,让你受用非浅平时对于网站整站的字体风格常常很纠结,纠结到底用什么样式才行,才好看,后来在网上搜集收到二十种我认为很漂亮的字体样式并使用,感觉很美观,解决了我以前的纠结.具 ...
前端一HTML:二十CSS的三种存在方式
1. 行内样式(存在于标签之中,用style属性设置) <p style="color:red">这是内容</p> 2. 嵌入样式(也称内联样式, 存在于t ...
二十款漂亮CSS字体样式
平时对于网站整站的字体风格常常很纠结,纠结到底用什么样式才行,才好看,后来在网上搜集收到二十种我认为很漂亮的字体样式并使用,感觉很美观,解决了我以前的纠结.具体二十种漂亮样式如下: 样式一: b ...
html 字体形状,二十款漂亮的CSS字体样式
样式一:body { margin: 0; padding: 0; line-height: 1.5em; font-family: 'Times New Roman', Times, serif; ...
【web前端(二十四)】CSS详述
CSS的发展历程从HTML被发明开始,样式就以各种形式存在.不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制.最初的HTML只包含很少的显示属性. 随着HTML的成长,为了满足页面设计者的 ...
二十款漂亮的CSS字体样式
样式一: body {margin: 0; padding: 0; line-height: 1.5em;font-family: "Times New Roman", Times ...
OpenCV学习笔记（二十六）——小试SVM算法ml OpenCV学习笔记（二十七）——基于级联分类器的目标检测objdect OpenCV学习笔记（二十八）——光流法对运动目标跟踪Video Ope
OpenCV学习笔记(二十六)--小试SVM算法ml 总感觉自己停留在码农的初级阶段,要想更上一层,就得静下心来,好好研究一下算法的东西.OpenCV作为一个计算机视觉的开源库,肯定不会只停留在数字图 ...
Bootstrap入门（二十九）JS插件6：弹出框
Bootstrap入门(二十九)JS插件6:弹出框加入小覆盖的内容,像在iPad上,用于存放非主要信息弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的首先我们引入 ...
SAP UI5 应用开发教程之二十九 - SAP UI5 的路由和导航功能介绍试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...

二十、预处理CSS的LESS

文章目录

Less

变量使用

编译less

二十、预处理CSS的LESS相关推荐

最新文章

热门文章