less的6种用法
-
js运行时编译:
- 网上下载less.min.js
-
<!DOCTYPE html> <html lang="en"> <head> <!-- 一定要写type="text/less" --> <style type="text/less"> .content-box{ width: 500px; height: 500px; background: blue; .inner{ width: 100px; height: 100px; background: red; } } </style> </head> <body> <div class="content-box"> <div class="inner"></div> </div> <script src="./less-2.5.3.min.js"></script> </body> </html>
-
vacode内自动编译:
- 安装easy less插件
- 建一个文件夹.vscode
.vscode 文件夹下建一个叫 settings.json 的文件
settings.json 中配置内容如下:"less.compile": { "outExt": ".wxss" }
- outExt 参数为导出文件名,默认为 .css,可以配置 .wxss、.acss 等,其他配置项请查询官方;
-
用koa-la工具编译:
- 下载koa-la软件
- koala有两种编译模式: normal即正常, compress即编译成–压缩成一行的css代码
-
Node.js中编译
-
vue-cli3中编译
直接 npm i less less-loader -D 就能直接写less了
less的语法
// 开头的不会被编译, 只有 /* */ 的才会被编译
1. less变量的使用
变量的声明: @变量名: xxx; 不仅可以声明属性值, 还能声明属性名, 选择器名
变量可以在任何位置声明, 但是less变量具有作用域
变量的获取:
1. 属性值: @xxx
2. url: @{xxx}
3. 属性名: @{xxx} 不常用
4. 选择器名: @{xxx} 不常用
变量的延迟加载:
div{
@var: 1;
number: @var; // 结果是2, 因为less的变量会延迟加载, 即先解析完作用域中变量的声明, 在去获取值
@var: 2;
}
2. &符号
// less
div{
&:hover{
}
}
编译后, 结果如下:
// css
div:hover{
}
3. 混合maxin(代码块)
3.1 普通混合
// less
.youCode{
width: 100px;
height: 100px;
color: red;
}
div{
.youCode;
}
p{
.youCode;
}
编译后, 结果如下:
// css
.youCode{
width: 100px;
height: 100px;
color: red;
}
div{
width: 100px;
height: 100px;
color: red;
}
p{
width: 100px;
height: 100px;
color: red;
}
3.2 带参数的混合
// less
// 不带参数即.youCode() { }
.youCode(@param1:100px,@param2){ // @param1:100px即设置默认值
width: @param1;
height: @param1;
color: @param2;
}
div{
.youCode(@param2: red); // 指定@param2为red
}
p{
.youCode(200px,blue);
}
编译后, 结果如下:
// css
div{
width: 100px;
height: 100px;
color: red;
}
p{
width: 200px;
height: 200px;
color: blue;
}
4. @import
// less
@import "xxx.less";
5. 匹配模式
// triangle.less
.triangle(@_,@with,@color)) {
width: 0px;
height: 0px;
}
.triangle(Left,@with,@color) {
border-width: @width;
border-style: solid;
border-color: transparent transparent transparent @color;
}
.triangle(Right,@with,@color) {
border-width: @width;
border-style: solid;
border-color: transparent @color transparent transparent;
}
.triangle(Top,@with,@color) {
border-width: @width;
border-style: solid;
border-color: @color transparent transparent transparent;
}
.triangle(Bottom,@with,@color) {
border-width: @width;
border-style: solid;
border-color: transparent transparent @color transparent;
}
// index.less
@import "./triangle.less";
.myTriangle{
.triangle(Right,100px,red);
}
6. 变量的计算
// less
div{
width: 100 + 100px; // 一方带单位即可
}
less还可以计算不同单位的值
7. extend
// less1
.juln{
color: black;
}
div:extend(.juln) {
background: white;
}
或
// less2, 极力推荐这种写法
.juln{
color: black;
}
div {
background: white;
&:extend(.juln);
}
编译后, 结果如下:
// css
.juln,div{
color: black;
}
div{
background: white;
}
extend和maxin的区别:
- maxin会让css文件变得很大, 因为maxin类似于ctrl+c ctrl+v, 但优点是支持参数
- extend会让css文件中代码复用, 所以极力推荐extend的写法, 但缺点是不支持参数
// less
.juln{
color: black;
&:hover{
color: red;
}
.test{
color: blue;
}
}
div {
background: white;
&:extend(.juln all); // 加个all即继承所有和.juln有关的样式, 如.juln:hover的样式
}
编译后, 结果如下:
// css
.juln,div{
color: black;
}
.juln:hover,div:hover{
background: white;
}
.juln .test,div .test{
color: blue;
}
8. 避免编译
// less
div{
width: calc(100px + 100px);
}
会被编译成:
// css
div{
width: calc(200px);
}
但如果不想让less中的100px+100px被编译, 就得像下面这么写:
// less
div{
width: ~"calc(100px + 100px)"; // 重点是 ~" "
}
即可编译成:
div{
width: calc(100px + 100px);
}