介绍

Less ( Leaner Style Sheets的缩写)是一门CSS扩展语言,也称为CSS预处理器。

做为CSS的一-种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入程序式语
言的特性。

它在CSS的语法基础之上,引入了变量, Mixin (混入) , 运算以及函数等功能,大大简化了CSS的编写
，并且降低了CSS的维护成本,就像它的名称所说的那样, Less可以让我们用更少的代码做更多的事情。

Less中文网址: http://lesscss.cn/
常见的CSS预处理器: Sass、Less、 Stylus

使用

我们首先新建一一个后缀名为less的文件，在这个less文件里面书写less语句。

  • Less 变量
  • Less编译
  • Less 嵌套
  • Less运算

less变量

变量是指没有固定的值，可以改变的。因为我们CSS中的一些颜色和数值等经常使用。

@变量名：值；

变量命名规范

  • 必须有@为前缀
  • 不能包含特殊字符
  • 不能以数字开头
  • 大小写敏感

    Less 编译

    原因

    本质上, Less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则
    最终会通过解析器,编译生成对应的CSS文件。

所以,我们需要把我们的less文件,编译生成为css文件,这样我们的html页面才能使用。

编译方法

vscode 用 Easy LESS 插件

安装完毕插件,重新加载下vscode.
只要保存一-下Less文件,会自动生成
CSS文件。

例子

html

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <title>Document</title>
  9.   <link rel="stylesheet" href="demo63.css">
  10. </head>
  12. <body>
  13.   123456789
  14. </body>
  16. </html>

less

@color: blue;
@fontColor: red;

body {
  background-color: @color;
  color: @fontColor;
}

image.png