初识less

对样式的了解现在还停留在css阶段,接触项目的时候发现标签还能嵌套着使用??这后缀名怎么不是css??是less??在vscode中有关于less的插件 easy less 写好less文件会自动生成对应的css文件

写less文件的时候会对应生成一个css文件
在这里插入图片描述

在这里插入图片描述
(在这里简单说明一下我存在的问题 我在html中引入的是less文件然后效果就出不来,换成css文件效果就显示出来了,我不知道到底这种引的方法对不对,但现在的框架不需要去引less文件直接就可以直接出样式)
在这里插入图片描述 引入less文件在页面中标签未添加上效果
在这里插入图片描述
引入css在这里插入图片描述

在这里插入图片描述

less方法有好多,在这里我只提一下我用到的,想要具体了解其他方法的可以再看看其他的博客

  1. 嵌套 也是我使用最多的方法

标签结构:
在这里插入图片描述

less写法:
在这里插入图片描述
二选一 注意使用&时后边标签要加空格分隔

对应css写法:

在这里插入图片描述

效果:
在这里插入图片描述
可以看出 相同标签采用不同样式,样式使用的是最后的结果

  1. 可以进行运算
    标签在这里插入图片描述
    less
    在这里插入图片描述
    css在这里插入图片描述

  2. 像封装函数一样将多次使用的样式抽取出来
    标签:
    在这里插入图片描述
    less:
    声明使用@名字
    在这里插入图片描述
    在这里插入图片描述
    css:在这里插入图片描述
    这样是不是很方便

  3. 可以像函数一样传参哦
    标签:
    在这里插入图片描述
    less:
    在这里插入图片描述
    css:
    在这里插入图片描述

刚开始实战项目,这是我在目前项目中学到的关于less的一些知识,但less其实挺多方法的,想要详细了解的可以看(https://juejin.cn/post/6844903520441729037)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值