Less

2024-02-04 22:23:58

1. 维护 css 的弊端
2. Less 简介
3. Less 安装
4. Less的使用

1. 维护 css 的弊端

CSS 是一门非程序式语言，没有变量、函数、 SCOPE（作用域）等概念。
CSS 需要书写大量看似没有逻辑的代码， CSS 冗余度是比较高的。
不方便维护及扩展，不利于复用。
CSS 没有很好的计算能力
非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。

2. Less 简介

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

Less中文网址

常见的CSS预处理器还有如下两种：

Sass： Sass中文网

Stylus ：[stylus中文官网](选择器 — Stylus 中文文档 | Stylus 中文网 (stylus-lang.cn))

3. Less 安装

安装nodejs，网址： http://nodejs.cn/download/, 命令行输入node –v ,查看版本即可,安装成功
基于nodejs在线安装Less，使用cmd命令npm install -g less 即可,使用cmd命令lessc -v查看版本即可 ,安装成功

4. Less的使用

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

Less 变量

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

定义格式
```
@变量名:值;
```
变量命名规范
1. 必须有@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 大小写敏感
```
@color: pink;
```

变量使用规范

//直接使用
body{
	color:@color;
}
a:hover{
	color:@color;
}

Less编译

本质上， Less 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些最终会通过解析器，编译生成对应的 CSS 文件。
所以，我们需要把我们的 less文件，编译生成为css文件，这样我们的html页面才能使用。编译的实现方式较为简单，可通过vscode插件easy less,当编写完less文件，保存之后该插件会自动生成css文件。

Less嵌套

使用情景：

<div id="header">
   <div class="logo"></div>
</div>

普通css写法

#header .logo {
    width: 300px;
}

Less嵌套写法

#header {
    .logo {
        width: 300px;
    }
}
//通过编译后，生成的css样式如下

#header .logo {
     width: 300px;
}

(交集|伪类|伪元素选择器)

内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；

//交集 <p class="one"></P>
p {
    .one {
        color:red
    }
}
//编译后
p .one {
    color:red;
}


//伪类
a {
    :hover {
        color:red;
    }
}
//编译后
a :hover {
    color:red;
}


//伪元素
a{
    ::befor {
        content:"1";
    }
}
//编译后
a ::befor {
    content:"1";
}

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

//交集 <p class="one"></P>
p {
    &.one {
        color:red
    }
}
//编译后
p.one {
    color:red;
}


//伪类
a {
    &:hover {
        color:red;
    }
}
//编译后
a:hover {
    color:red;
}


//伪元素
a{
    &::befor {
        content:"1";
    }
}
//编译后
a::befor {
    content:"1";
}

Less运算

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

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

注意：
- 运算符中间左右有个空格隔开，比如1px + 5
- 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
- 如果两个值之间只有一个值有单位，则运算结果就取该单位
- 除法/需要（）括起来，不然会认为你的是有两个值 值一 / 值二，不会进行计算返回计算结果
```
//less文件下
.search_content {
    //height: 88rem / 50;
    height: (88rem / 50);
}

.search_content {
    //height: 88rem / 50;
    height: 1.76rem;
}
```

less样式引入

less文件里可以导入其他的less样式，获得其他样式的效果。

@import "style";

码农公寓