php中的less文件是什么文件,Less基础

维护css的弊端

css是一门非程序式语言，没有变量，函数，SCOPE(作用域)等概念

1、css需要书写大量看似没有逻辑的代码，css的冗余度是比较高的；

2、不方便维护以及进行拓展，不利于复用；

3、css没有很好的计算能力

Less介绍

Less(leaner style sheets)的·缩写是一门css扩展语言，也成为css预处理器，作为css的一种形式扩展语言，它并没有减少css的功能，而是在现有的css的语法基础上，为css加入程序式语言特性。

它在css的语言基础上，引入了变量，Mixin(混入)，运算以及函数功能，大大简化了css的缩写，并且降低了css的维护成本，就像它的名称一样，less可以让我们用更少的代码实现更多的事情。

常见的css预处理器：Sass、Less、Stylus

一句话总结：Less是一门css预处理语言，它扩展了css的动态特性

在使用less之前需要进行less的安装，但是less的安装之前还需要安装nodejs，在node环境中安装less

一、less的安装安装nodejs,  目前最新版本(12.13.1)安装网址：http://nodejs.cn/download/

检查是否安装成功，使用cmd命令(window10是 window+r打开 运行输入cmd)---输入"node-v"查看版本即可

基于nodejs在线安装Less ,使用cmd "npm install -g  less"即可

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

二、  Less使用

首先新建一个后缀名为less的文件，在这个文件中书写less语句

Less变量

变量是指没有固定的值，可以进行改变的。因为在css中的一些颜色和数值经常被使用。

在一个页面中出现许许多多的颜色，但是用到的颜色都相同，此时就可以通过定义变量，赋予变量的值，调用变量，这样就可以实现统一的修改。

语法：

@变量名： 值；

1、变量名的命名规范必须由@为前缀

不能包含特殊字符

不能以数字开头

大小写敏感

//上面进行定义变量，下面进行引用，变量的值进行修改，下面引用的样式进行统一的修改//定义一个红色的变量

@color: red;//错误的变量命名 @1font @font#~//变量名区分大小写 @color 和 @Color 是两个不同的变量//定义了一个 字体为14px 像素的变量

@font14: 14px;

div {

background-color: @color;

}

span {

color: @color;

font-size: @font14;

}

a {

font-size: @font14;

}

使用变量比较好维护

Less编译

在html页面中不能使用less文件的，通常都是引用css，那么怎么来使用Less文件呢？

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

所以，需要把创建好的less文件，编译生成css文件，这样html页面才能使用。

需要使用到一个vscode Less插件

Easy LESS 用来把less文件编译为css文件，安装完毕插件后，需要重新加载vscode 只要保存一下Less文件，会自动生成css文件

Less嵌套

1、子元素的样式直接写到父元素里面

那在less文件中的是如何去写给header和a写样式呢;

在css中不能这样去写;只能在less中这样去写

当保存less文件时，文件生成的css文件

经常用到选择器的嵌套

#header .logo {

width:300px

}

less嵌套写法

#header {

.logo {

width: 300px;

}

}

如果遇见(交集|伪类|为元素选择器)内层选择器的前面没有&符号，则被它解析为父选择器的后代；

如果有&符号，它就被解析为父元素自身或父元素的伪类。

//css样式写法

a:hover {

color: red;

}//less嵌套写法

a {&:hover{

color: red;

}

}

如果有伪类，交集选择器，伪元素选择器，内层选择器需加&

less运算

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

//less里面的写法

@border:5px+5;

div {

width:100px;

height: 200px;

border:@border solid red;

}

/*生成的css*/div {

width: 100px;

height: 200px;

border: 10px solid red;

}

注意：

1、在运算符的左右两侧必须敲一个空格隔开

2、两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准

3、两个数参与运算，如果两个数都有单位，而且是不一样的单位，最后的结果以第一个单位为准

4、颜色有数字也可以进行参与运算