Web前端最全Less使用教程和步骤_less的使用(1),行业寒冬如何面对

结尾

学习html5、css、javascript这些基础知识,学习的渠道很多,就不多说了,例如,一些其他的优秀博客。但是本人觉得看书也很必要,可以节省很多时间,常见的javascript的书,例如:javascript的高级程序设计,是每位前端工程师必不可少的一本书,边看边用,了解js的一些基本知识,基本上很全面了,如果有时间可以读一些,js性能相关的书籍,以及设计者模式,在实践中都会用的到。

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

html5

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)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值