Less使用教程和步骤

1. 项目初始化： **npm init -y(**初始化保留默认配置)

2. 安装项目依赖：npm i less -S

3. 创建less文件 xx.less

4. 编写less样式

5. 把less文件生成css文件

6. 把css引入到页面html中

代码演示：xx.less

@w:20px;

.base(@bw:1px,@type:solid,@color:red){

border:@bw @type @color;

}

.box{

width: 10*@w;

height: 4*@w;

.base(3px);

}

npm命令回顾

安装命令：npm install modulename@1.1.1 --global --save --dev-save --force

install 简写 i

–global 简写 g  : 全局安装，一般是安装到c盘，一般的作用都是提供命令行中运行的命令

–save  简写 -S  ：项目依赖，安装的是开发阶段和生产阶段都需要的模块

–dev-save 简写 -D ：项目依赖，安装的是开发阶段使用的模块

–force : 强制安装，替代旧版本

modulename@1.1.1 ： 模块名称后的 @1.1.1 叫版本号

卸载命令： npm uninstall modulename@1.1.1

npm scripts 命令：

npm run scriptsName

5. 变量

---

1. 定义语法：@var:value;

2. 使用变量：@var

3. 作为普通的值使用

4. 选择器变量

5. 属性变量

6. url 变量

7. 声明变量

8. 变量的作用域

和js中变量作用域一致

代码演示：

//1.定义变量  @变量:变量值;

//2.选择器变量

@box:#box;

@class:.content;

@{box}{//#box{border: 1px solid red;}

.base()

}

@{class}{

width: @w;

}

//3.属性变量

@h:height;

.wrapper{

@{h}:@w*10;

}

//4. url变量

@images:‘./img/bg.jpg’;

.aa{

width: 100*@w;

height: 10*@w;

background: url(‘@{images}’);

}

//5. 声明变量

@fontSize:{font-size: 20px;}

.bb{

@fontSize();

}

6. 嵌套

---

1. 按照页面的层级结构来定义css

2. & 能指代外层标签的作用    7. 混合

3. 定义函数

没有参数函数

有参数的函数

有默认值的函数

数量不定的参数 base3(…){box-shadow:@arguments;}

循环方法

.generate-columns(@n, @i: 1) when (@i =< @n) {

.column-@{i} {

width: (@i * 100% / @n);

}

}

2. 使用函数

没有参数的函数直接使用，可以不加小括号

有参数的函数调用时需要传参

代码演示：

//函数

.generate(@n: 1, @w: 100px) when(@n<=10) {

.item@{n} {

width:@w - (@n - 1)*10;

height: @w - (@n - 1)*10;

border:2px solid #000000;

position:absolute;

top:@n*5 - 2px;

left:@n*5 - 2px;

box-sizing: border-box;

}

.generate(@n+1, 100px)

}

//循环函数

.content {

width: 100px;

height: 100px;

border: 2px solid #000;

position: relative;

.generate()

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。