结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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
1. 作为普通的值使用
2. 选择器变量
3. 属性变量
4. url 变量
5. 声明变量
3. 变量的作用域
和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. 混合
1. 定义函数
没有参数函数
有参数的函数
有默认值的函数
数量不定的参数 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()
}
8. 继承
1. extend 关键字来实现继承
2. 全部继承 all 代码演示:
//继承
.box8{
&:extend(.box .content all);
color: red;
#### 结束
一次完整的面试流程就是这样啦,小编综合了腾讯的面试题做了一份前端面试题PDF文档,里面有面试题的详细解析,分享给小伙伴们,有没有需要的小伙伴们都去领取!
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![](https://img-blog.csdnimg.cn/img_convert/45f2869b91b538dd3bb3290ba13bc806.png)