一、什么是less
- less 是一个 css 扩展,让 css 变成支持变量,嵌套等操作的 css 语言
- 可以去 Less官方文档 去学习
- less 可以在浏览器端使用也可以在服务端使用
- 在浏览器端使用CDN:<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script> 引入
- 并且需要告诉浏览器我们写的是 less 代码:
<style type="less"></style>
- 但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css),影响网页加载时间
- 我们想让我们写好 less 文件之后直接转换成 css 文件,这里 vscode 安装 EasyLESS 插件,写好之后会自动生成语义相同的 css 文件
- EasyLESS高级配置
- 在 less 中导入文件用 @import
@import "../test.less";
二、注释
- 多行注释保留
- 单行注释不被保留在编译生成的 CSS 中
/* 我在编译之后仍然显示 */
// 我在编译之后不显示
三、变量
基本使用
- less 中使用 @ 来定义变量
- less 中的变量是块级作用域
@width: 50px;
@height: 100px;
div {
width: @width;
height: @height;
}
变量插值(Variable Interpolation)--需要使用{}大括号
- 变量用于选择器名、属性名、URL、
@import
语句
@m:margin;
@selector:#wrap;
* {
// 使用的时候要加大括号
@{m}:0;
}
@{selector} {
color: pink;
}
// 网址在使用的时候也要加大括号
@image: "../image";
div {
background: url("@{image}");
}
延迟加载(Lazy Evaluation)
当一个变量被声明多次,会取最后一次的值,并从当前作用域往外寻找变量。
div {
@var: 2;
z-index: @var;
@var: 3;
}
// z-index 属性值为 3
四、嵌套
Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力
- 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)
#father {
color:pink;
.inner {
color: purple;
}
}
父选择器 (Parent Selectors)
在嵌套规则中, &
表示父选择器,常用于给现有选择器添加伪类。
#father {
color:pink;
.inner {
color: purple;
// 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
// 要这样写
&:hover {
background: pink;
}
}
}
如果没有 &
,会被编译成后代选择器 inner:hover
。
除此之外,&
还能用于生成重复类名
.button {
&-ok {
background-image: url('ok.png');
}
&-cancel {
background-image: url('cancel.png');
}
&-custom {
background-image: url('custom.png');
}
}
五、混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方式,可理解为复制粘贴。
- 混合是为了避免大量重复的样式代码,可以将一部分样式打包成代码块 (长得很像函数)
普通混合
// 可以传参,即使没有参数也要加括号,加了括号后在 css 文件中不会显示
.template(@w,@h) {
color: pink;
width: @w;
height: @h;
}
div {
// 上面的样式就添加到里面了
.template(100px,100px);
}
带参数的混合(Parametric Mixins)
- less 混合支持默认参数,例如:
.template(@w:100px,@h:200px) {
color: pink;
width: @w;
height: @h;
}
div {
// 这时里面可以不用传参数
.template();
}
命名参数
- less 也支持命名参数,解决了参数不匹配的问题
.template(@w:100px,@h:200px,@c:pink) {
color: @c;
width: @w;
height: @h;
}
div {
// .template(black);
// 显示错误,w 参数把 black 接收了过去,导致显示错误
.template(@c:black);
// 正确写法
}
六、计算
- 在 less 中,计算的双方只需要一方带单位就可以了
- 例如:
100 + 100px == 200px
- 为了和 css 保持兼容,less 不会把
calc()
属性计算出来,会留到 css 中计算
七、继承
- 继承同样是为了压缩代码,混合有时候两个类似的功能,他们的 css 代码相差不多,但是里面有很多的重复,这时我们可以使用继承来写这部分代码
- 在继承中不支持参数
- 语法格式:
div:extend(.jicheng)
(实质就是在两个选择器中加了一个逗号)