18.element-ui
elementui：目前最主流的UI框架
UI框架-PC端：帮助我们快速搭建项目，element-ui(主要vue/react)、antd(ant design)(主要react/vue)、bootstrap(jquery)、layui(jquery)、easyui(jquery)
安装：
npm i element-ui
**使用：**在main.js文件中
js
import ElementUI from "element-ui";//1 引入element-ui框架
import 'element-ui/lib/theme-chalk/index.css';//2 引入样式文件
Vue.use(ElementUI);//3 注册在使用的时候直接找到合适的样式复制html代码即可，也不用注册，它们就是一些已经封装好的组件，已经在全局注册了。
如果看到一个属性没有值，其实它的意思是他的属性值是布尔值，如round等同于round="true",而:round="false".
自己仿照element-ul自己封装一个button框架，之后可以按照这种自己封装UI框架：
vue
<!-- GaoButton.vue -->
<template>
<div>
<div class="btn" :style="{ backgroundColor: bgc, borderRadius: bd }">
<!-- <span v-if="$slots.default"> -->
<slot></slot>
<!-- </span> -->
<!-- $slots的内容是default，如果插槽中有内容，$slots.default返回的是一个数组，如果插槽中没有内容，$slots.default返回undefined，在逻辑判断在中undefined等同于false -->
</div>
</div>
</template>
<script>
export default {
// props: ["type", "round"],
props: {
type: String,
round: Boolean,
},
computed: {
bgc() {
if (this.type == "success") {
return "green";
} else if (this.type == "danger") {
return "red";
} else {
return "gray";
}
},
bd() {
return this.round ? "20px" : "5px";
},
},
};
</script>
<style scoped>
.btn {
display: inline-block;
border-radius: 5px;
background-color: greenyellow;
padding: 5px 10px;
color: #fff;
}
</style>
<!-- 使用gao-button组件 需要引入、注册 -->
<gao-button type="danger" round>我是可更改的按钮</gao-button>19.Less
什么是less
常见的CSS预处理器：Sass/Scss(发展后的)、Less、Stylus
LESS是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。 LESS是一种动态样式表语言，扩展了CSS的功能。 LESS也是跨浏览器友好。
CSS预处理器是一种脚本语言，可扩展CSS并将其编译为常规CSS语法，以便可以通过Web浏览器读取。 它提供诸如变量，函数， mixins 和操作等功能，可以构建动态CSS。
中文官网：
安装：
ba
npm install -g lessLess的编译
Less只是编写CSS的一种过渡的代码而已，部署的时候还是要转为CSS，转为CSS才能被浏览器识别。
编写Less代码时新建一个.less的文件，在里面编写Less代码。
在html中<link rel="stylesheet" href="./less/test.less">引入时直接引入.less文件浏览器是无法识别的，需要把Less代码转为CSS代码，再将CSS代码引入到html文件中。
那么如何将Less代码转为CSS代码呢？
方法一：下载Node环境，通过npm包管理下载less工具，使用less工具对代码进行编译；-----在项目中实际使用的
方法二：使用VSCode插件(Easy Less)或者在线编译https://lesscss.org/less-preview，------会生成一个同名的.css文件，还未学习框架的脚手架阶段时可以使用，学了脚手架就不用了
方法三：引入CDN的less编译代码，对less进行实时的处理。-----------这样可以直接引入.less文件，通过CDN的js代码将less转为css，coderwhy老师目前上课所用的方法
html
<link rel="stylesheet/less" href="./less/test.less">
<script src="https://cdn.jsdelivr.net/npm/less@4"></script方法四：将less编译的js代码下载到本地，执行js代码对less进行编译。
嵌套规则
假设我们有如下css代码
css
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}用 Less 语言我们可以这样书写代码：
less
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。
但是用了这种嵌套我们会发现，hover这种伪类不会写了
比如之前 使用伪类选中元素的某种特殊的状态
css
.box:hover{background:red}less中提供了 & 表示当前选择器的父级，可以理解为所在选择器的名称
less
.box{
&:hover{background:red}
}
.list{
.item{
&:hover{
color:@mainColor;
}
&:first-child{
color:blue;
}
&:nth-child(2){
color:red;
}
}
}变量
Less变量其实就是将属性值提前存储到一个容器中，然后我们可以在书写Less中调用它.
可以将常见的颜色和字体等定义为变量来使用。
语法
定义变量：
@变量名:值;使用调用变量:
CSS属性：@变量名
案例：
less
@number:brown;
div{
width: (100 / 2px);
height: 100 * 2px;
background-color: @number;
&:hover{
background-color: aqua;
}
}运算
原始CSS中，我们给元素宽高等等的时候，我们只能给到一个确切的值，使用Less我们可以进行算法：
任何数字、颜色或者变量都可以参与运算
注意除法运算的时候要整体套括号
less
div{width:(100/2px)}
border: (@width * 2) solid black;
color: #888 / 4;- 对于两个不同单位值之间的运算，不要求你进行运算操作的几个值必须带单位，只要其中有一个有单位就可以了，运算结果的值会优先取第一个值的单位为准。
- 如果两个值之间只有一个值有单位，则运算结果就取该单位。
- 可以使用()小括号来添加一些更复杂的运算操作。在对颜色进行运算时，会忽略颜色值前面的#号。
- 算术运算符在加、减或比较之前会进行单位换算。
- 乘法和除法不作单位的转换。因为这两种运算在大多数情况下都没有意义，一个长度乘以一个长度就得到一个区域，而CSS是不支持指定区域的。
很笨，只有在特殊场景下，像 em to px 这种情况下才会用到运算，其他时候很少用到。
混合(Mixins)
如果有些样式希望可以重用，可以直接像下面这样直接输入所需的类即可
在实际的开发中，一般在less文件夹中单独新建一个 mixins.less 文件用来存放混合。
注意：混入在没有参数的情况下，小括号可以省略，但是不建议这样使用。
less
.large{
font-size: 50px;
}
.box{
h1{color:red}
// 混入
.large()
}
/*
转化为CSS
.large {
font-size: 50px;
}
.box {
font-size: 50px;
}
.box h1 {
color: red;
}
*/混入是可以传参数的。
js
// 定义混入时把需要改变的属性用变量表示，可以给参数设置默认值
.box_border(@borderWidth: 5px, @borderColor: purple) {
border: @borderWidth solid @borderColor;
}
.box1 {
width: 100px;
height: 100px;
// 混入传参
.box_border(10px, orange)
}
.box2 {
width: 200px;
height: 200px;
// 混入未传参，使用默认值
.box_border()
}混入和映射结合使用。
作用：可以弥补less中不能自定义函数的缺陷。 例如 pxToRem函数的编写
less
.box_size {
width:100px;
height:100px;
}
.box1 {
// box1的宽度想要使用box_size的宽度，先.box_size()拿到整个对象，再使用对象的key
width: .box_size()[width];
height:200px;
}继承(Extend)
继承和混入mixins作用类似，用于复用代码，和Mixins相比，继承代码最终会转化成并集选择器。
less
/* 混入minxis */
.box_border {
border: 5px solid red;
}
.box {
width: 100px;
height: 100px;
.box_border()
}
/* 混入转化为CSS */
.box_border {
border: 5px solid red;
}
.box {
width: 100px;
height: 100px;
border: 5px solid red;
}
/* 继承extend */
.box_border {
border: 5px solid red;
}
.box {
width: 100px;
height: 100px;
&:extend(.box_border);
}
/* 继承转化为CSS */
.box_border,
.box {
border: 5px solid red;
}
.box {
width: 100px;
height: 100px;
}在实际的开发中，还是使用混入更加多一些，使用混入更加灵活简洁，
函数(Functions)
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
less函数手册https://less.bootcss.com/functions/
函数的用法非常简单。下面这个例子将介绍如何利用 percentage 函数将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
less
@base: #f04615;
@width: 0.5;
.class {
width: percentage(@width); // returns `50%`
color: saturate(@base, 5%);
background-color: spin(lighten(@base, 25%), 8);
}作用域(scope)
在查找一个变量时，首先在本地和混入查找变量，如果找找不到，则从"父"级作用域继承。
less
@mainColor: red;
.box {
@mainColor: blue;
.item {
@mainColor: yellow;
span {
color: @mainColor; /* 最终是离得最近的yellow */
}
}
}注释(comment)
在less中，块注释和行注释都可以使用.
// /**/
导入
less
@import "library"; // library.less
@import "typo.css";