Less 介绍

最新推荐文章于 2024-05-21 09:36:37 发布

原创最新推荐文章于 2024-05-21 09:36:37 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
做为 CSS的一种形式的扩展，它并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性。
它在CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS的维护成本，就像它的名称所说的那样，Less可以让我们用更少的代码做更多的事情。
Less中文网址：http://lesscss.cn/
常见的CSS预处理器：Sass、Less、Stylus
一句话：Less是一门 CSS 预处理语言，它扩展了CSS的动态特性。

3.3 Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

npm：node package manager，node包管理工具

less是作为node中的一个工具包存在的，所以通过npm安装

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

3.4 Less使用

Less 使用之变量

变量是指没有固定的值，可以改变的。

理解：变化的量，变化的内容，变化的值。

语法：

@变量名:值;
如：
@color: pink;

注意：

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

代码：

// 定义一个粉色的变量
@color: pink;  
// 错误的变量名  @1color   @color~@#
// 变量名区分大小写  @color  和  @Color 是两个不同的变量
// 定义了一个 字体为14像素的变量
@font14: 14px;
body {
    background-color: @color;
}
div {
    color: @color;
    font-size: @font14;
}
a {
    font-size: @font14;
}

总结：

定义了一个粉色的变量，body和div都使用了这个变量。那么我们如果想要将body和div的颜色一起修改为另一个颜色，只需要修改变量的值即可，简单方便
一般将使用次数比较多的内容，定义为变量，然后通过使用变量，来使用到变量的值

Less 编译 - vocode Less 插件

问题：html文件，是没有办法直接使用less文件的。html只能使用css文件，那么能不能将less转换为css，然后html文件去使用呢？
介绍：
- 本质上，Less 包含一套自定义的语法及一个解析器/翻译器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。
- 所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。
- Easy LESS 插件用来把less文件编译为css文件
- Easy Less插件会使用less中的解析器/翻译器，将less翻译为css
- 安装完毕插件，重新加载下 vscode
- 只要保存一下Less文件，会自动生成CSS文件
- less 编译： less翻译，将less翻译为css
插件安装：

效果：

Less 嵌套

less嵌套写法如下：

   /*我们经常用到选择器的嵌套 (选择器组合使用：后代选择器)*/
    #header .logo {
      width: 300px;
    }
    /* less中的选择器嵌套写法 */
    #header {
        .logo {
           width: 300px;
        }
    }

如果遇见（交集|伪类|伪元素选择器），利用&进行连接

a:hover{
    color:red;
}
a{
  &:hover{
      color:red;
  }
}

案例分析图：

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

/*Less 里面写*/
@witdh: 10px + 5;
div {
    border: @witdh solid red;
}
/*生成的css*/
div {
  border: 15px solid red;
}
/*Less 甚至还可以这样 */
width: (@width + 5) * 2;