CSS预处理器----Less

**

less**

less是一种动态样式语言,属于css预处理器的范畴,它扩展了 CSS 语言,
增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ,也可以借助Node.js在服务端运行。

less的中文官网:http://lesscss.cn/
bootstrap中less教程:http://www.bootcss.com/p/lesscss/

Less编译工具

koala 官网:www.koala-app.com

less中的注释

以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来申明一个变量:@pink:pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名:#@{selector的值}的形式
3.作为URL:@{url}
4.变量的延迟加载:
即:比如three,先把@var执行完之后才会执行它。
而one,它在.class这个块里,与.brass这个块没有关系。
在这里插入图片描述

less中的嵌套规则

1.基本嵌套规则
2.&的使用
在这里插入图片描述

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
2.不带输出的混合
3.带参数的混合
在这里插入图片描述
4.带参数并且有默认值的混合
在这里插入图片描述
5.带多个参数的混合
6.命名参数
在这里插入图片描述
7.匹配模式
第一个函数有参数为@_,则在调用后面的函数时,都会先执行第一个函数。他们的函数名是一样的
在这里插入图片描述
调用方法
在这里插入图片描述
8.arguments变量
在这里插入图片描述

less运算

在less中可以进行加减乘除的运算在这里插入图片描述

less避免编译

相当于把这个东西字符串原封不动的解析出来,留给浏览器去计算
在这里插入图片描述
结果:
在这里插入图片描述

less继承

在这里插入图片描述
在这里插入图片描述
使用混合
要记得先导入:
@import “minin/juzhong.less”
在这里插入图片描述
传参的juzhong.less
在这里插入图片描述
继承:
在这里插入图片描述
编译后的css文件
在这里插入图片描述
或者这样写:(应该更好)
在这里插入图片描述
编译后的css:
在这里插入图片描述
+all,把所有状态拿下来
在这里插入图片描述
首先juzhong-extend.less
在这里插入图片描述
在刚才加了all后,就都继承下来了
在这里插入图片描述**
性能比混合高
灵活度比混合低**

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值