看到 less 老是想起 less is more 这句话,这门语言的确是把原来很繁琐的 css 给包装成一门类似于编程语言的语言,感觉看视频只能学习到一点,关键还是看官方文档

  • less 是一个 css 扩展,让 css 变成支持变量,嵌套等操作的 css 语言
  • 可以去 Less 官方文档 去学习
  • less 是一门 css 的预处理语言
  • less 是一个 css 的增强版,通过 less 可以编写更少的代码实现更强大的样式
  • 在 less 中添加了许多的新特性:像对变量的支持、对 mixin 的支持… …
  • less 的语法大体上和 css 语法一致,但是 less 中增添了许多对 css 的扩展,所以浏览器无法直接执行 less 代码,要执行必须向将 less 转换为 css,然后再由浏览器执行

less 基础

  • less 可以在浏览器端使用也可以在服务端使用

  • 在浏览器端使用 CDN:

    1
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

引入

  • 并且需要告诉浏览器我们写的是 less 代码:

    1
    <style type="less"></style>
  • 但是上面的方法是运行时编译 (也就是运行这个网页时才把 less 文件转化为 css),影响网页加载时间

  • 我们想让我们写好 less 文件之后直接转换成 css 文件,这里 vscode 安装 EasyLESS 插件,写好之后会自动生成语义相同的 css 文件

关于 EasyLESS 扩展的配置

在 settings.json 文件中添加以下代码(注意 json 文件中尽量不要添加中文注释,会报错)

1
2
3
4
5
6
7
{
"less.compile": {
"compress": true,
"sourceMap": true,
"out": true
}
}
  • compress 代表压缩 css。

  • sourceMap 代表生成地图(在浏览器控制台可以追踪到 less 文件位置)

  • out代表输出对应的 css 文件

    所以一般全部都为 true

    当然你也可以这样

1
2
3
"less.compile": {
"out": "${workspaceRoot}\\src\\assets\\css\\"
}
  • ‘${workspaceRoot}’ 代表的是根目录;

  • 这样就可以更改生成.css 文件的路径了,但是上面代码配置是我的.css 文件的目录地址,这个自行配置就行;

在 less 中导入文件用 @import

import 用来将其他的 less 引入到当前的 less

可以通过 import 来将其他的 less 引入到当前的 less 中

1
@import "../test.less";
标题

less 注释

less 里面的注释分为在编译之后仍然显示和在编译以后不显示两种

1
2
/* 我在编译之后仍然显示 */ css中的注释,内容会被解析到css文件中 // 我在编译之后不显示
less中的单行注释,注释中的内容不会被解析到css中

less 变量

  • less 中使用 \@ 来定义变量
  • less 中的变量是块级作用域
1
@color:pink;
  • 选择器和属性名同样可以作为变量 (但是这种形式用的很少)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@m: margin;
@selector: #wrap;
* {
// 使用的时候要加大括号
@{m}: 0;
}
@{selector} {
color: pink;
}
// 网址在使用的时候也要加大括号
@image: '../image';
div {
background: url('@{image}');
}
  • 变量的延迟加载 (变量提升):less 会等到块级作用域加载完成才会替换里面的变量
1
div { //可以先使用后定义 z-index: @var; @var: 3; } // z-index 属性值为 3
  • 变量发生重名时,会优先使用比较近的变量
1
2
3
4
5
6
7
8
9
10
11
12
13
@d: 200px;
@d: 300px;
@h: 200px;
@h: 300px;

div {
// 变量发生重名时,会优先使用比较近的变量
@d: 115px;
width: @d; //此处使用115px
height: @h; //此处使用115px
//可以在变量声明前就使用变量
@h: 115px;
}
  • 其实 css3 中也支持变量,以两个横线开头定义一个变量--
1
2
3
4
5
html {
/* css原生也支持变量的设置 */
--color: #ff0;
--length: 200px;
}

新版本语法$

1
2
3
4
5
div {
width: 300px;
// 新版的语法
height: $width;
}

less 嵌套规则

  • 父标签的样式可以嵌套子标签的样式 (像在 html 里面的结构一样)
1
2
3
4
5
6
#father {
color: pink;
.inner {
color: purple;
}
}
  • 假如要让 子元素 .inner 添加一个 hover 属性

    & 表示父类的名称

1
2
3
4
5
6
7
8
9
10
11
#father {
color: pink;
.inner {
color: purple;
// 不能直接在里面写 :hover,这样写他会直接变成inner的子元素
// 要这样写
&:hover {
background: pink;
}
}
}

less 混合

  • 混合是为了避免大量重复的样式代码,可以将一部分样式打包成代码块 (长得很像函数)
1
2
3
4
5
6
7
8
9
10
// 可以传参,即使没有参数也要加括号,加了括号后在 css 文件中不会显示
.template(@w,@h) {
color: pink;
width: @w;
height: @h;
}
div {
// 上面的样式就添加到里面了
.template(100px,100px);
}
  • less 混合支持默认参数,例如:
1
2
3
4
5
6
7
8
9
.template(@w:100px,@h:200px) {
color: pink;
width: @w;
height: @h;
}
div {
// 这时里面可以不用传参数
.template();
}
  • less 也支持命名参数,解决了参数不匹配的问题
1
2
3
4
5
6
7
8
9
10
11
.template(@w:100px,@h:200px,@c:pink) {
color: @c;
width: @w;
height: @h;
}
div {
// .template(black);
// 显示错误,w 参数把 black 接收了过去,导致显示错误
.template(@c:black);
// 正确写法
}

小知识:haslayout:是 ie6 版本之前的兼容性问题,可以开启 haslayout 来解决兼容性问题 开启的方法:overflow: hidden

  • less 匹配模式:例如想要弄四个方向的三角型,可以在函数的第一个参数上弄一个标识符,然后就可以定义四个混合,这时就可以根据传入的参数来判断想要用的是哪个方向的三角型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 向左的三角型
.template(L,@w:100px,@h:200px,@c:pink) {
// 假如里面是画三角型的方法
color: @c;
width: @w;
height: @h;
}
// 向右的三角型
.template(R,@w:100px,@h:200px,@c:pink) {
// 假如里面是画三角型的方法
color: @c;
width: @w;
height: @h;
}
div {
// 想要一个向左的三角型
.template(L);
}
  • 当混合里面的第一个参数是 @_ 时并且也拥有其他形参时,调用同名混合也会把拥有这个参数的混合调用上

    • arguments 变量:和 js 中的 arguments 是一样的,是包含实参的伪数组
1
2
3
4
5
6
7
.border() {
border: @arguments;
}
div {
.border(1px,solid,black);
}
// 可以把合并语法传入进去

less 计算

  • 在 less 中,计算的双方只需要一方带单位就可以了
  • 例如:100 + 100px == 200px
  • 为了和 css 保持兼容,less 不会把 calc() 属性计算出来,会留到 css 中计算
    在 less 中所有的数值都可以直接进行运算
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.box1 {
// 在less中所有的数值都可以直接进行运算
// + - * /
width: 100px + 100px;
height: 100px/2;
background-color: #bfa;

.box1 {
/* calc()计算函数 */
width: calc(200px * 2);
height: var(--length);
background-color: var(--color);
}
}

less 继承

  • 继承同样是为了压缩代码,混合有时候两个类似的功能,他们的 css 代码相差不多,但是里面有很多的重复,这时我们可以使用继承来写这部分代码
  • 在继承中不支持参数
  • 语法格式:div:extend(.jicheng) (实质就是在两个选择器中加了一个逗号)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//:extend() 对当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1) {
color: red;
}

.p3 {
//直接对指定的样式进行引用,这里就相当于将p1的样式在这里进行了复制
//mixin 混合
.p1();
}

// 使用类选择器时可以在选择器后边添加一个括号,这时我们实际上就创建了一个mixins
.p4() {
width: 100px;
height: 100px;
}

.p5 {
.p4;
}

或者我们这样来看更直观

1
2
3
4
5
6
7
8
9
10
// less 文件
.jicheng {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.header:extend(.jicheng) {
/* header 里的代码 */
}
  • less 编译后
1
2
3
4
5
6
7
8
9
10
11
/* css 文件 */
.jicheng,
.header {
width: 100px;
height: 100px;
margin: 0;
padding: 0;
}
.header {
/* header 里的代码 */
}
  • 想要继承类的所有状态需要在 extend 后面加上 all div:extend(.jicheng all)
1
2
3
4
5
6
7
8
9
.jicheng {
// 继承的东西...
}
.jicheng:hover {
// :hover 继承的东西...
}
.header:extend(.jicheng all) {
// header 自己的样式
}
  • 这样就可以继承本身的和 :hover 的了
1
2
3
4
5
6
.jicheng,
.header {
}
.jicheng:hover,
.header:hover {
}

less 小技巧

注释问题

1
2
/*编译后会被保留*/
//编译后不会被保留

适用 !important

1
2
3
.nav{
.nav-wrapper(#EFF3F7)!important;//nav-wrapper所有的样式都带上!important
}

避免编译符号 ~

在字符串前加上一个~即可使用一些 less 不认识的专有语法或者一些不正确的 css 语法。