结尾
学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
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;
}
.box9:extend(.box ){
margin: 20px;
}
9. 导入
@import可以导入less文件
@import ‘./xx.css’;
10. 内置函数
数学函数
颜色函数
.one{
color: rgb(0,0,0);
}
.two{
color: lighten(rgb(0, 0, 0),50%);
}
最后
一个好的心态和一个坚持的心很重要,很多冲着高薪的人想学习前端,但是能学到最后的没有几个,遇到困难就放弃了,这种人到处都是,就是因为有的东西难,所以他的回报才很大,我们评判一个前端开发者是什么水平,就是他解决问题的能力有多强。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
分享一些前端面试题以及学习路线给大家
](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
分享一些前端面试题以及学习路线给大家
[外链图片转存中…(img-1G28miEM-1715858958705)]
[外链图片转存中…(img-vDs6eHfb-1715858958706)]