16 less

less

less 是一门css的预处理语言

• less 是css的增强版，可以编写很少的代码实现更强大的样式
• less里面有很多新的特性，如：变量，函数
• less的语法跟css一致，但是less有很多新的扩展，less文件不能直接被执行，要先转换为css文件进行引用

less 编写的更加方便，less就像一种辅助语法，使用的时候直接转换成css文件引用即可

在vscode中有一个less插件，编写完，插件会自动转换成css文件
在这里插入图片描述

less语法

注释

//单行注释

// `less`中的单行注释，注释中的内容不会被解析到`css`中

/*
`css`中的注释，内容会被解析到`css`文件中
*/

变量

语法@变量名

• 直接使用使用变量时，则以@变量名的形式使用即可

• 作为类名、属性名或者一部分值使用时，必须以@{变量名}的形式使用

• 可以在变量声明前就使用变量（可以但不建议）

@b1:box1;

@size:200px;
@bc:background-color;
@bi:background-image;
@color:red;
@path:image/a/b/c;

// 类名的使用
.@{b1}{
  width: @size;       //用作变量
  height: $width;
  @{bc}: @color;             //属性名
  @{bi}: url("@{path}/1.png");  //url
}
//注意：在url中使用less语法需要用引号包裹
}

父选择器

& 符号表示当前父元素

---

less

a {
  color: blue;
  &:hover {
    color: green;
  }
}

css

a {
  color: blue;
}

a:hover {
  color: green;
}

---

less
还可以直接引用父标识符

.button {
  &-ok {
    background-image: url("ok.png");
  }
}

css

.button-ok {
  background-image: url("ok.png");
}

继承Extend

可以继承某个css选择器的属性
:extend() 对当前选择器扩展指定选择器的样式（选择器分组）

less

nav ul:extend(.inline){
  background: blue;
	/* &:extend(.inline); 也可以这样继承*/
}
.inline {
  color: red;
}

css

nav ul {
  color:red;
  background: blue;
}
.inline {
  color: red;
}

混合（Mixins）

less

.a, #b {
  color: red;
}
.mixin-class {
  .a();
}
.mixin-id {
  #b();
}

css

.a, #b {
  color: red;
}
.mixin-class {
  color: red;
}
.mixin-id {
  color: red;
}

创建混合

注意:自己创建的混合是不会生成css文件的

// 使用类选择器时可以在选择器后边添加一个括号，这时我们实际上就创建了一个mixins
.my-hover-mixin() {
  &:hover {
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

css文件

button:hover {
  border: 1px solid red;
}

混合函数

//冒号后面是默认值，如果没有传递参数，就用默认值
.test(@w:200px, @h:100px, @bc:red){
  width: @w;
  height: @h;
  background-color: @bc;
}

.p6{
  // .test(200px, 100px, red); // 对应参数位传值
  // .test(@h:200px,@w:100px,@bc:red); // 写明对应属性，可变换顺序
  // .test();
  .test(300px);
}

生成的css

.p6 {
  width: 300px;
  height: 100px;
  background-color: red;
}

自带函数

官方有很多函数，可以查阅使用

  color: saturate(#f04615, 5%);//取这个颜色增加5%
   color:average(red,yellow); //取这两个颜色的中间数

import

我们可以包含其他less文件

这样的好处就是，我们可以把文件模块化分开，比如变量放在一个less，函数放在一个less

需要的时候引入，修改的时候也能快速定位修改

@import "style.less";
@import "syntax.less";

map文件，帮助定位错误

没有更改之前，我们在浏览器调试看到的只是css文件的错误位置

如果我们要改，需要找一下，太麻烦了，能不能直接显示less中行号呢？这样我们直接定位到对应less中直接进行修改，维护起来也会比较方便

我们需要在Easy LESS插件中修改settings.json文件，在其中添加如下配置

"less.compile": {
    "compress": true, // true => remove surplus whitespace
    "sourceMap": true, // true => generate source maps (.css.map files)
    "out": true // false => DON'T output .css files (overridable per-file, see below)
}

修改完毕后，会发现多生成出来一个all.css.map文件，说明配置生效

再进入浏览器，我们直接可以定位到less文件位置