一、less简介
1、less是一门css的预处理语言。是一个css的增强版,通过less可以编写更少的代码实现更强大的样式。
2、css原先也只支持变量的设置。
变量的设置可以便捷更改一样的样式,其中,calc()是计算函数。
3、在less中添加了许多的新特性,像对变量的支持、对mixin的支持等等
4、less的语法大体上和css语法一致,但是less中增添了许多对css的扩展,所以浏览器无法直接执行less代码,要执行必须将less转换为css,然后再由浏览器执行。
二、less的语法
1、// less中的单行注释,注释中的内容不会被解析到css中
2、/**/ css中的注释,内容会被解析到css文件中
3、变量:在变量中可以存储一个任意的值 ,并且我们可以再需要时任意修改变量中的值
变量的语法: @变量名:变量值;
4、使用变量时,如果是直接使用则以@变量名的形式使用即可;变量作为类名或者一部分值使用时必须以@{变量名}的形式使用
5、变量发生重名时,会优先使用比较近的变量。
6、可以再变量声明之前使用变量,但一般不推荐使用这种方法。
三、父元素和扩展
1、& 表示外层的父元素
2、:extend() 对当前选择器扩展指定选择器的样式(选择器分组)
四、混合函数
1、在混合函数中可以直接设置变量。
2、test() 括号中有几个变量就需要设置几个值。
五、less的补充
1、在less中所有的数值都可以直接进行运算,加减乘除分别表示为:+ - * /
2、可以通过import来将其他的less引入到当前的less中。
本文的分享到此结束,下一节跟大家分享CSS的最后一个重要的内容——弹性盒,以及我们即将进入下一阶段的笔记学习分享——JavaScript的初级学习分享。