Less常用功能使用
2023-03-20 15:30:08 时间
Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。
Less常用的重要功能有:
1.变量
2.cala计算
3.html样的选择器嵌套
4. &父选择器本身或父选择器伪类
1.变量
包括变量的定义,变量的引用,变量的计算
值变量
@width:5000px; @height:300px; @font_size:12px; .textarea { width:@width; height:@height; font-size:@font_size; }
名称变量(选择器或属性名)
@width:5000px; @height:300px; @font_size:12px; @name:.text; @b_c:border-color; .textarea { width:@width; height:@height; font-size:@font_size; } @{name} { @{b_c}: aqua; }
2.calc计算
div{ @val: 0.20rem; width: calc(~”100% - @{val}”); } 编译成: div { width: calc(100% - 0.2rem); }
3.选择器嵌套,引用
less的使用像html一样使用的嵌套结构,并且可以引用
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } //引用使用 #menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }
4. &父选择器引用
在使用嵌套规则时,需要注意 & 符号。
当内层选择器前面没有& 符号时,它表示的是父选择器后面的后代选择器。
如果有& 时,表示的是父元素自身或父元素的伪类
.van-cell { background-color: #007bff; color: white; &::after { display: none; } .avatar { width: 60px; height: 60px; background-color: #fff; border-radius: 50%; margin-right: 10px; } .username { font-size: 14px; font-weight: bold; } }
更多使用方式从官网查看:https://less.bootcss.com/#概览
伪类与伪元素介绍
伪元素: 使用::before ::after修饰,创建的一个有内容的虚拟容器。这个元素虽然逻辑上存在,但并不存在于实际的DOM树中,它是新创建的元素,这个新创建的元素叫“伪元素”。
伪类(xxx的伪类,如a:link): 使用:link :hover修饰,它存在于DOM树中,逻辑上存在,但在DOM树上无须标识的“幽灵”标签。
:before/:after是Css2的写法,
::before/::after是Css3的写法
1.伪元素要配合content属性一起使用
2.伪元素不会出现在DOM中,所以不能通过js来操作,仅仅是在 CSS 渲染层加入
3.伪元素的特效通常要使用:hover伪类样式来激活
4.eg:当鼠标移在span上时,span前插入”duang”
<style> span{ background: yellow; } span:hover::before{ content:"duang"; } </style> <span>222</span>
参考文章:https://blog.csdn.net/weixin_49115895/article/details/108683791
相关文章
- 金融服务领域的大数据:即时分析
- 影响大数据、机器学习和人工智能未来发展的8个因素
- 从0开始构建一个属于你自己的PHP框架
- 如何将Hadoop集成到工作流程中?这6个优秀实践必看
- SEO公司使用大数据优化其模型的5种方法
- 关于Web Workers你需要了解的七件事
- 深入理解HTTPS原理、过程与实践
- 增强分析:数据和分析的未来
- PHP协程实现过程详解
- AI专家:大数据知识图谱——实战经验总结
- 关于PHP的错误机制总结
- 利用数据分析量化协同过滤算法的两大常见难题
- 怎么做大数据工作流调度系统?大厂架构师一语点破!
- 2019大数据处理必备的十大工具,从Linux到架构师必修
- OpenCV中的KMeans算法介绍与应用
- 教大家如果搭建一套phpstorm+wamp+xdebug调试PHP的环境
- CentOS下三种PHP拓展安装方法
- Go语言HTTP Server源码分析
- Go语言HTTP Server源码分析
- 2017年4月编程语言排行榜:Hack首次进入前五十