less学习

看到 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 语法。