开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情
一、引
日常使用中能增加开发乐趣、以及减少开发工作量。
二、特性
1、变量(常量)
less文件中也可以定义变量。
a、值变量
- 以@开头定义变量，并且使用时直接键入@名称。
- 常用的变量 封装到一个文件中，这样利于代码组织维护。
@whiteColor: white; // 白色
@blackColor: black; // 黑色
@systemColor: #d63838; // 底层背景色
.lessDemo {
color:@whiteColor;
background: @blackColor;
border: 1px solid @systemColor
}
// 生成的 CSS
.lessDemo {
color: white;
background: black;
border: 2px solid #d63838;
}
b、url 变量
- 根据配置引入其他的样式文件、相同名称常量会被覆盖。
1、common.less 文件
@bankName:'hs'
{
@whiteColor: white; // 白色
}
@url: %(@bankName, '.less');
@import url(@url);
2、hs.less 文件
{
@whiteColor: red; // 白色
}
- 项目结构改变时，修改其变量即可。
@images: "../img";//需要加引号
body {
background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
}
// 生成的 CSS
body {
background: url("../img/dog.png");
}
c、变量运算
- 加减法时 以第一个数据的单位为基准。
- 乘除法时 注意单位一定要统一。
@width: 300px;
@color: #222;
.lessDemo {
width: @width - 20;
height: @width - 20*5;
margin: (@width - 250)*2;
color: @color*2;
background-color: @color + #111;
border: 10px solid #222 + 1;
border: 10px solid #222 + 11;
border: 10px solid #222 + 111;
}
// 生成的 CSS
.lessDemo {
width: 280px;
height: 200px;
margin: 100px;
color: #444;
background-color: #333;
border: 10px solid #******;
border: 10px solid #******;
border: 10px solid #919191;
}
// 16进制转10 、10进制转16
d、变量作用域
- 就近原则。
@var: @a;
@a: 100%;
.lessDemo {
width: @var;
//width: @a;
@a: 20%;
border: 20px solid @systemColor;
}
// 生成的 CSS
.lessDemo {
width: 20%;
}
2、混合方法
- 就是封装。
- flexCenter 与 flexCenter() 是等价的，建议写出.flexCenter()，以避免混淆。
a、无参数方法
// 水平垂直居中
.flexCenter {
display: flex;
justify-content: center;
align-items: center;
}
// 水平等分 垂直居中
.flexBetween {
display: flex;
justify-content: space-between;
align-items: center;
}
.lessDemo {
.flexCenter();
// .flexCenter;
.boxSize(100vw, 100vh);
background: @systemColor;
}
// 生成的 CSS
.lessDemo {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background: #d63838;
}
b、默认参数方法
- Less 可以使用默认参数，如果没有传参数，那么将使用默认参数。
- @arguments 犹如 JS 中的 arguments 指代的是 全部参数。
- 传的参数中 必须带着单位。
// 盒模
.boxSize (@width, @height:@width) {
width: @width;
height: @height;
}
// 字样
.fontStyle (@color, @fontSize, @fontWeight:400) {
color: @color;
font-weight: @fontWeight;
font-size: @fontSize;
}
.lessDemo {
.boxSize(100px);
//.boxSize(100);
//.boxSize();
.fontStyle(@whiteColor, 16px);
//.fontStyle(@whiteColor, 16);
background: @systemColor;
}
// 生成的 CSS
.lessDemo {
width: 100px;
height: 100px;
color: green;
font-weight: 400;
font-size: 16px;
background: #d63838;
}
c、方法的匹配模式
- 面向对象中的多态
- switch、case
@baseRemUnit: 37.5px; // 1rem 基准值
.pxToRem(px,@name, @value) {
@{name}: ( @value / @baseRemUnit) * 1rem;
}
.pxToRem(rem,@name, @value) {
@{name}: @value;
}
// 有问题
.pxToRem('%',@name, @value) {
@{name}: @value;
}
.pxToRem(@_,@name, @value) {
border: 1px solid @systemColor;
}
// 字样
.fontStyleFun (@color, @fontSize:16px, @fontWeight:400) {
color: @color;
.pxToRem(get-unit(@fontSize), font-size, @fontSize);
font-weight: @fontWeight;
}
.lessDemo {
.boxSize(100px);
//.fontStyleFun(@systemColor, 1rem, 500);
//.fontStyleFun(@systemColor, 20px, 500);
.fontStyleFun(@systemColor, 20%, 500);
}
d、方法的条件筛选
- 比较运算有： >、 >=、 =、 =<、 <。
- = 代表的是等于。
- 除去关键字 true 以外的值都被视为 false。
- when and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行。
- when not 运算符，相当于 非运算 !，条件为 不符合才会执行。
- when , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行。
// px 转 rem 不是rem的时候 / 37.5
@baseRemUnit: 37.5px; // 1rem 基准值
.pxToRem(@name, @value) when (ispixel(@value)) {
@{name}: (@value / @baseRemUnit) * 1rem;
}
// px 转 rem 是 rem 直接赋值
.pxToRem(@name, @value) when (isunit(@value, rem)) {
@{name}: @value;
}
// 字样
.fontStyleFun (@color, @fontSize, @fontWeight:400) {
color: @color;
.pxToRem(font-size, @fontSize);
font-weight: @fontWeight;
}
.lessDemo {
.fontStyleFun(@systemColor, 20px, 500);
}
// 生成的 CSS
.lessDemo {
color: #d63838;
font-size: 0.53333333rem;
font-weight: 500;
}
.lessDemo {
.fontStyleFun(@systemColor, 1rem, 500);
}
// 生成的 CSS
.lessDemo {
color: #d63838;
font-size: 1rem;
font-weight: 500;
}
