因为 Less 和 CSS 非常像,因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展,这就是 Less 如此易学的原因之一。
一、安装
在Node.js环境中使用Less:
//安装:
npm install -g less
> lessc styles.less styles.css
在浏览器环境中使用 Less :
//在浏览器环境中使用 Less :
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
cmd中:
npm i less less-loader -D //css预处理语言
二、 功能
1、变量
<style lang="less">
// 01 定义变量
@gray:#999;
@size:20px;
.plusAction a{
color:@gray;
font-size:-10px+@size;
}
</style>
2、混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。假设我们定义了一个类(class)如下:
// 02 混合,加()自己本身不显示
.flex(){display:flex;flex-wrap:wrap;}
.plusAction .el-form-item__content {
.flex;
justify-content:space-between;
padding:0 20px 0 10px;
}
3、嵌套
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
// 03 嵌套
假设我们有以下 CSS 代码:
ul{list-style: none;}
ul li{line-height: 44px;}
ul a {text-decoration: none;}
可以写成:
ul a:hover{color:red;}
ul{
list-style: none;
li{line-height: 44px;}
a{text-decoration: none;}
&:hover{color:red;}
}
.loginBlock{
h3{
font-size: 28px;
font-weight:500;
span{
color:dodgerblue;
font-size: 36px;
font-weight: 900;
}
}
}
4、计算
算术运算符 +
、-
、*
、/
可以对任何数字、颜色或变量进行运算。如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
<style lang="less">
// 04计算 尺寸可以+ - * /
@w:20px;
@margin:10px;
.test{
span{
display: inline-block;
height: 44px;
background-color: bisque;
margin: @margin;
}
}
.s1{
padding:0 @w;
}
.s2{
padding:0 @w+10;
}
.s3{
padding:0 @w+20;
}
<style>
5、转义 转义后都是字符串
转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~"anything"
或 ~'anything'
形式的内容都将按原样输出,除非 interpolation。
/05转义 转义后都是字符串
@str:~".loginBlock .test span";
@b:~"1px solid red";
//如果作为选择器或者数学 @{变量}
@{str}{
color: red;
border:@b;
}
6、内置函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。
/06内置函数 颜色 字符串 数学
@bg:rgba(82, 23, 190, 0.479);
.test{
.s1{background-color: @bg;};
.s2{background-color: desaturate(@bg,80%);};
.s3{background-color: lighten(@bg,30%);};
}
7、命名空间与映射
//07命名空间 映射
#bg(){
background-color: purple;
font-size: 24px;
}
#colors() {
primary: blue;
secondary: green;
size: 24px;
}
.testp{
//取选择器里面的所有的属性与属性值。
font-size: #colors[size];
//映射某一个值
background-color:.test.s2[background-color];
}