[less学习参考网址](http://www.hubwiz.com/course/5591fa39c086935f4a6fb80d/
里面涉及到一个平台; rhino 是一个3D的建模平台
rhino
最大的特点:====> 动态(书写-更加的灵活),主要思想是宏定义常量定义的思想;
预编译语言 ====》替换
&& 拓展
![](https://img.haomeiwen.com/i1205674/3c495a764f368a8e.png)
&&
1.客户端的使用方式
外链引入: <link rel="stylesheet/less" type="text/css" href="styles.less">
内链引入:
<style type="text/less">
// less 代码
</style>
引入less的编译脚本:
<script src="less.js" type="text/javascript"></script>
放在header里面,在vue.js 一定要放在</style>的后面;在vue中一定要放在</style>签之后;
less在pc上的安装,有助于在node环境下进行编译;
npm install less -g
npm install less@latest 最新的
![](https://img.haomeiwen.com/i1205674/14ff5d04e0ef2839.png)
上面的代码可以编译,可能编译不成功,引入有问题,应该是没有引入less的库成功;
其他不需要de的例子是没有问题的;
![](https://img.haomeiwen.com/i1205674/553051af6e3f0b6d.png)
1.1 监视模式【客户端上的一个功能】
改变less代码,客户端自动刷新? 也就是要及时查看属性的变化,就要使用这个了;
只要在URL后面加上'#!watch'
你也可以通过在终端运行less.watch()来启动监视模式。
【开发者的方式使用less.watch 这种方式还是不错的】
<script>less.watch();</script> [还是在代码上写的
手动调用解析器和编译器:
var parser = new(less.Parser);
命令是lessc 这个命令看,
在终端上编译出现问题;如何在终端上精心配置????
注意终端上是使用lessc **
【less这个命令是linux上的命令,less和cat差不错,不过less一般用于查看长文件】
(这个是由于less语言本身的特质决定的,是编译原因嘛)
变量: 对某个常用值进行定义,多处使用; == 常量【只可以一次】
[这个变量和其他的语言上描述的有点不一样的地方就是:这个变量,使我们手写改变,不会因这为程序运行而改变,是设置好的改变,因为less是预编译,而不会编译程序,所以不会存在这种长时间运行的变化];
(1)体现在替换上面:【宏定义的功能】
下面是有关的内容【具体】less的动态体现在变量上面
2.1 基本的变量
![](https://img.haomeiwen.com/i1205674/6fef3bf56700bb00.png)
![](https://img.haomeiwen.com/i1205674/b8b29fe4489934ec.png)
2.2 计算能力 (加减乘除等等基本操作)
![](https://img.haomeiwen.com/i1205674/5386ec7928796287.png)
![](https://img.haomeiwen.com/i1205674/d3628c83a6b1810f.png)
2.3 混合 【class】基本回合,替换多个属性
1)2.3.1 不带有参数
![](https://img.haomeiwen.com/i1205674/017784bc38416f73.png)
![](https://img.haomeiwen.com/i1205674/cd1f88c580d7624a.png)
2)2.3.2 带有参数
![](https://img.haomeiwen.com/i1205674/7e9426cb3979cf8b.png)
![](https://img.haomeiwen.com/i1205674/5577c9587dd72564.png)
2.4 @arguments 变量
====> 主要是对传入的-多个参数,如果全部接受参数的情况
![](https://img.haomeiwen.com/i1205674/ea280dc23454742b.png)
2.5 模式匹配 switch选择
![](https://img.haomeiwen.com/i1205674/b855402605c60ac8.png)
![](https://img.haomeiwen.com/i1205674/022dd867a8a6128c.png)
2.6 导引表达式
当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。
为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断
【if/else的书写变种】
![](https://img.haomeiwen.com/i1205674/9e55df7ba7d843c9.png)
2.7 导引比较运算
检测函式:iscolor、isnumber、isstring、iskeyword、isurl
ispixel、ispercentage、isem
使用关键词 not 否定条件:
> >= = =< < 比较大小
2.8 嵌套规则
注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus。
串联选择器和后代选择器区别
![](https://img.haomeiwen.com/i1205674/0afdf2ffc57ee2d7.png)
![](https://img.haomeiwen.com/i1205674/01f25dddbce83abd.png)
3 函数
3.1 函数用于计算
![](https://img.haomeiwen.com/i1205674/1885dcf1939e2323.png)
颜色有对应的函数处理:查阅官网
3.2 颜色函数
![](https://img.haomeiwen.com/i1205674/60a6a61162810e6d.png)
![](https://img.haomeiwen.com/i1205674/e3e2ee479d9e77a4.png)
3.3 Math函数
有一些人进行处理,包括了对应pi呀,等等函数
3.4 字符串函数
![](https://img.haomeiwen.com/i1205674/cb3d530b9e732fb8.png)
![](https://img.haomeiwen.com/i1205674/d79ccaac3aa081da.png)
![](https://img.haomeiwen.com/i1205674/e5a8b84b33b72bca.png)
4 使用
![](https://img.haomeiwen.com/i1205674/0a722ecf337aec1a.png)
![](https://img.haomeiwen.com/i1205674/8e5e4c9919859828.png)
![](https://img.haomeiwen.com/i1205674/92cd95a98caa97d0.png)
![](https://img.haomeiwen.com/i1205674/3180e4afcef9a0c4.png)
![](https://img.haomeiwen.com/i1205674/41f317ba2806cd6b.png)
javascript表达式,也就是less里面可以使用js表达式;
![](https://img.haomeiwen.com/i1205674/dca464b6e11e5f8b.png)
![](https://img.haomeiwen.com/i1205674/10f14d55fc26eefb.png)
![](https://img.haomeiwen.com/i1205674/332680f0e9fe6e9a.png)
网友评论