用LESS函数写CSS样式简单上手教程

LESS

在写css的时候，可以直接写一个.css文件，但是实际开发中也会使用less的方法写css。
less的写法比css的写法功能更加强大。

Less简介

Less 是一门 CSS 预处理语言，它扩展了 CSS 的写法，增加了变量、函数等特性。

注意点：

• 在less中，完全兼容css的语法，所以可以直接在less文件中写css没问题
• 浏览器不认识less文件，需要需要使用less中的样式，需要先把less文件编译成.css文件，再使用！！

less的编译插件及配置

以下是VSCode安装步骤:

1. 选择左侧第五个拓展按钮，下载插件 easy less ，点击安装，再点击重新加载

• 安装好之后，重新加载或者关闭vscode重新打开

2. 实际开发中需要对插件进行配置

• 使用的时候直接复制粘贴，注意在上一行的最后加一个逗号
• 设置完之后需要重新打开vscode即可

代码如下:

"less.compile": {
    "out": "../css/"
}

配置完成后,只需要同创建CSS文件夹一样,创建less文件夹,在less文件夹内部创建less文件,当保存less文件的同时,会自动生成对应CSS文件夹和CSS文件

注意点：

• 以后项目中如果有less文件之后，样式都在less文件中写即可，不用去修改css文件

  因为css文件都是less编译之后的结果，只需要关注less的修改即可

• 但是页面中引入的必须是编译之后的css文件，因为less文件浏览器不认识。

less的注释

在less文件中可以写两种注释

• 一种是css的注释：/* 注释的内容 */ ，最后会编译展示在css文件中
• 一种是less的注释：// 注释的内容 ，只在less中使用，不会编译展示在css文件中

一般在less文件中，推荐使用less的注释方法

less的变量

一般在网站中会有主题色（当前网页中用的较多的颜色），如果此时需要改换网页的主题色，一个个去改非常麻烦，此时可以使用less中的变量完成效果

语法:

• 变量：可以变化的量
• 语法：@变量名:变量值;
• 作用：编译的时候会把less中所有的变量名替换成变量值，这样可以统一修改某一个值（如主题色）

例子:

@mainColor:#e92322;

.box1 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}
.box3 {
  width: 200px;
  height: 200px;
  background-color: @mainColor;
}

less的嵌套

在less中，选择器的关系可以通过嵌套来表示

/* less中的嵌套：less中选择器可以嵌套 */
/* 1、后代选择器，选择器嵌套即可 */
/* 2、子代选择器，前面使用> */
/* 3、交集选择器，前面使用&（&表示这一级选择器） */
/* 4、并集选择器，前面直接写, */
/* 5、伪元素，前面使用&（&表示这一级选择器） */

.father {
  width: 600px;
  height: 600px;
  background-color: pink;

  /* 伪元素 */
  &::after {
    content: '';
  }

   /* 交集选择器 */
  &.active {
    background-color: red;
  }

   /* 后代的关系，直接嵌套即可 */
  .son {
    width: 400px;
    height: 400px;
    background-color: blue;

    >.sun {
      width: 200px;
      height: 200px;
      background-color: yellow;
    }
  }

   /* 并集选择器 */
  .box1,
  .box2 {
    width: 100px;
    height: 100px;
    background-color: orange;
  }
}

less的运算

在less代码中可以直接写加减乘除进行计算

.box {
  width: 200px;
  height: 200px;
  background-color: pink;

 /* 伪类的写法 */
  &:hover {
	/*less中可以直接计算加减乘除计算的，编译之后会把计算的结果直接显示在css文件中。 */
    width: 200px / 3;
    width: 200px * 2;
    width: 200px + 100px;
    width: 200px - 100px;
  }
}

less的函数（了解）

针对于css中重复的样式，除了可以使用定义公共类的方式，还可以使用less中的函数来处理（函数在之后的js会详细说到，先简单了解下）

/* 以下代码重复过多,可以用less精简 */

.red {
  width: 300px;
  height: 300px;
  background-color: red;
}
.blue {
  width: 300px;
  height: 300px;
  background-color: blue;
}
.green {
  width: 300px;
  height: 300px;
  background-color: green;
}

代码优化如下:

/* 在less中也一种处理重复样式的方法：函数。直接在选择器里面使用 */
/* 函数的写法和定义公共类很像，后面需要加上括号 */

/* 定义函数 */
.common() {
  width: 300px;
  height: 300px;
}

.red {
  /* 使用函数 */
  .common();
  background-color: red;
}

.blue {
  .common();
  background-color: blue;
}

.green {
  .common();
  background-color: green;
}

拓展：

函数里面可以传参，让函数中样式的取值变化（变化的量→变量）

比如让红盒子100*100， 蓝盒子200*200 ，绿盒子300*300

.common(@value) {
  width: @value;
  height: @value;
}

.red {
  /* 使用函数 */
  .common(100px);
  background-color: red;
}

.blue {
  .common(200px);
  background-color: blue;
}

.green {
  .common(300px);
  background-color: green;
}