简介
整理了less
使用过程中,常用的语法等
安装
less
解析需要使用模块:less
;
- 新建目录,下载
less
mkdir less npm init -y npm i less
- 新建
style.less
文件
touch style.less
- 修改package.json文件,添加
build
命令
{
// ...
"scripts": {
// ...
"build": "lessc style.less resStyle.css"
},
// ...
}
- 修改的
style.less
文件,需要编译时,运行npm run build
引用外部文件 @import
@import "@/themes/variables.less";
@import "./colors.less";
@import '~antd/lib/style/themes/default.less';
变量
-
使用
@
声明一个变量 -
重复赋值时,后赋值的会替换先赋值的
-
如果变量需要镶嵌到字符串中,需要用
{}
将变量名分隔开。eg:@{position}
-
示例代码
@primary-color: #ffaf53;
@primary-color: #207BE4; // 前面有定义的@primary-color,会覆盖,使用新值 #207BE4
@position: top;
@images: "../img";
.test {
border-color: @primary-color; // 变量使用
background-image: url("@{images}/white-sand.png"); // 路径等都可以用变量
color: #efefef;
background-color: $color; // 通过$取某个属性值
@color: primary-color; // 可以将变量名赋值给另一个变量
.inner {
color: @@color;
}
.border_@{position} { // 字符串中,通过 {} 包裹使用变量
border-@{position}: 1px solid @primary-color;
}
&::after { // 嵌套代码中,使用 & 引用父元素
content: '*';
color: green;
}
}
- 编译后代码
.test {
border-color: #207BE4;
background-image: url("../img/white-sand.png");
color: #efefef;
background-color: #efefef;
}
.test .inner {
color: #207BE4;
}
.test .border_top {
border-top: 1px solid #207BE4;
}
.test::after {
content: '*';
color: green;
}
Maps
@theme-mutual: {
primaryColor: #ffaf53;
bgColor: #f4f4f4;
fontSize: 32px;
borderRadius: 4px;
};
.commonTheme(@theme) {
.test {
color: @theme[primaryColor];
}
}
.mutual {
.commonTheme(@theme-mutual);
}
// 编译后
// .mutual .test {
// color: #ffaf53;
// }
运算符
算术运算符 +、-、*、/
可以对任何数字、颜色或变量进行运算。
如果可能的话,算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px
到 cm
或 rad
到 %
的转换。
语句
条件语句 if
@position: top;
.test {
position: absolute;
left: 0;
right: 0;
top: if((@position=top), 0, auto);
bottom: if((@position=bottom), 0, auto);
@index: 5;
// and or not
color: if((@index > 3) and (@index < 10), red, green);
}
循环语句 each
默认参数 value
key
index
(index
从 1 开始)
@widthList: 24, 50, 100;
each(@widthList, .(@w, @k, @i){
.w_@{w} {
width: unit(@w, px);
}
.h_@{w} {
height: unit(@w, px);
}
.wh_@{w} {
width: unit(@w, px);
height: unit(@w, px);
}
each(@widthList, .(@h){
.wh_@{w}_@{h} {
width: unit(@w, px);
height: unit(@h, px);
}
})
})
// range: 参数分别为 start end step
// start、step可省略。 eg: range(5) 1 ~ 5
@hrList: range(5, 30, 5);
each(@hrList, {
.hr_@{value} { // 默认 value key index
display: block;
width: 100%;
height: unit(@value, px);
clear: both;
}
})
继承 extend
.clearfix {
display: block;
clear: both;
}
.test {
color: green;
&:extend(.clearfix);
}
// 编译后
.clearfix, .test {
display: block;
clear: both;
}
.test {
color: green;
}
混入 mixin
// 定义
.ar(@size) {
border-radius: @size;
overflow: hidden;
}
// 可以设置默认值 @num: 2
.ellipsis(@num: 2, @color: green) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @num;
-webkit-box-orient: vertical;
border-color: @color;
}
// 没有参数的 是这么写 .clearfix() {}
// 也可以写作 .clearfix {} 这种写法(其实是css中的类)编译出来 会保留这个类
// 调用的时候 .clearfix; 或者 .clearfix(); 都可以
.clearfix {
display: block;
clear: both;
}
.test {
color: green;
// .ellipsis(); // 有默认值的可以省略; 也可以这么调用:.ellipsis;
.ellipsis(@num: 3, @color: $color); // 可以指定传入的变量,这时候顺序无所谓了
.ar(4px);
}
发表评论