怎样使用LESS语言
简介
- Less是css的预处理语言，它扩展了css的功能，但是依然遵循css的语法规则，为css赋予了动态语言的特征，比如说 * 变量，混合（Mixins），函数，嵌套，运算等。*
特点
- Less使用了css的语法规则，而且新增的语言特性也遵循css语法，而且在书写less的时候，你可以随时用css的书写方式去书写less。
使用方式
- 方式一：浏览器编译
1、引入Less文件：
<link rel="stylesheet" type="text/less" href="less/bianliang.less">
注意：less文件的引入方式，可以先作为css引入，然后修改type的值为text/less，或者修改rel的值为stylesheet/less；
以下四种方式都可以：
<link rel="stylesheet/less" type="text/css" href="less/bianliang.less">
<link rel="stylesheet/less" type="text/less" href="less/bianliang.less">
<link rel="stylesheet/less" href="less/bianliang.less">
<link rel="stylesheet" type="text/less" href="less/bianliang.less">
2、引入编译less文件的js框架
<script src="js/less.min.js"></script>
3、按照less的语法进行书写less和正常的书写方式去书写html。
注意：这种方式必须在服务器环境下才能起作用！！！
通过less.js编译之后没有真正的css文件生成，编译之后的css样式保存在内存中，表现在html中的头部。
- 方式二：考拉（koala）编译
1、正常书写less；
2、把less文件拖放到考拉编译器中，此时考拉会自动生成对应的css文件；
3、把生成的css文件引入到我们的HTML中就可以了。
- 方式三：借助gulp等自动化构建工具完成。
变量
- 1、声明变量：
以@符号开头，之后跟上任意的变量名称，之后给变量赋值就可以了。 - 2、使用变量 ：
正常的书写css，只是在书写属性值的时候，用我们定义好的变量就可以了。
注意：
声明变量的基本格式：@name:value;
声明变量
嵌套
- 嵌套就是一个样式中包含另外一个样式
嵌套
注意：实际工作中，嵌套是有要求的，最多不要超过3层！！！
因为嵌套层数过多，编译之后的css文件的选择器会特别臃肿。
运算
- less中为我们提供了简单的数学运算（加减乘除），复杂的运算交给函数去完成，运算可以是数值之间的运算，也可以是颜色的色值的运算。
运算
注意：所有的运算的运算符的前后都必须要加空格！！！
混合
- 混入，mixins
混合
注意事项：
1、混合类似于js的函数，定义的规则是：（必须以点开头）
.name(变量）{
样式“函数”
}
2、混合中可以不传递参数，但是这种情况下，在使用的时候就必须赋值；
3、混合中可以传递一个或者多个参数，不同参数之间用逗号隔开，如果传递的参数有默认值的话，使用的时候可以不传递值，使用默认的混合中的参数默认值，如果传递值的话，按照用户传递的数值进行计算。
函数
- 原理就是在less中映射了js的函数规则。我们只需要调用就可以了
函数
ceil(@num) //向上取整
floor（@num） //向下取整
round(@num,2) //四舍五入 ，保留两位小数点，默认是0
max(@num1,@num2,@num3) //返回最大值
min(@num1,@num2,@num3) //返回最小值
isnumber（@num） //返回布尔值
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
……
匹配模式
- 类似于js的if else判断
匹配模式
其它
- 1、引入
基本结构：@import "name.less";
可以引入css文件，也可以引入less文件，引入less文件的话，就会对引入的那个less文件进行编译。 - 2、less中的有关注释
// 在被编译之后是不能显示在css文件中的；
/**/ 在被编译之后是能显示在css文件中的；
在less中这两种注释都是可以直接被使用的。 - 3、避免被编译
基本结构： ~'内容' 。 - 4、在同一个作用域内，所有的定义的变量，以最后定义的那个值为准。
变量
- 5、&符号：
表示其所有的父选择器（贴图1中:hover对应贴图2）
1
2
注意
-
一、计算属性
calc在less文件和css文件中的使用区别：
less:width: calc(~"100% - 40px");
css:width: calc(100% - 40px); -
二、注意下面示例代码中拼接字符串前面的
~符号
&.bg-dashboard { background-image: url(~'@{assetsUrl}/images/nodata-bg/v-dashboard.png'); }
&.bg-report { background-image: url(~'@{assetsUrl}/images/nodata-bg/v-worksheet.png'); }
&.bg-dataproduct { background-image: url(~'@{assetsUrl}/images/nodata-bg/v-dataproduct.png'); }
&.bg-cube { background-image: url(~'@{assetsUrl}/images/nodata-bg/v-schema.png'); }
官网
- less官网：
- less中文网：
