less的初步学习
来源:互联网 发布:js 回调函数 全局变量 编辑:程序博客网 时间:2024/05/17 23:32
- 注释
在less文件中的/**/的注释会显示在css文件中,而//的注释则不会 - 中文编码
在less文件顶部加上字符集提示“@charsetUTF-8’” - 变量(variables)
1)普通的变量
html: <header><h1>1</h1></header> <footer><h1>2<h1></footer> less: @bgColor:green @fontColor:#FFF header,footer{ background:@bgcolor h1{ color:@fontColor } }
2)作为选择器和属性名的变量
html: <div class="width"></div> less: @w:width @{w}{ @w:59px; }
3 )作为URL的变量
@logoUrl:'https://baidu.com/img/' less: header{ background:url("@{logoUrl}logo.jpg") }
4)变量是延迟加载的,变量无需再使用前申明,同样能正常使用
5)定义相同变量时,后申明的变量优先级高,其会生效
4. 混合:混合就是将一系列属性从一个规则集里引入到另外一个规则集里的方式
1)普通混合
css: .font_sc{font-size:12px;color:red} h1{font-size:12px;color:red;line-height:24px} h2{font-size:12px;color:red;line-height:25px} less: .font_sc{font-size:12px;color:red} h1{line-height:24px;.font_sc;} h2{line-height:25px;.font_sc;}
2 )不带输出的混合:即不输出相同样式的css对象,对其不编译到css里面(对比上面的代码)
css: h1{font-size:12px;color:red;line-height:24px} h2{font-size:12px;color:red;line-height:25px} less: .font_sc(){font-size:12px;color:red} h1{line-height:24px;.font_sc;} h2{line-height:25px;.font_sc;}
3)带选择器的混合
.hover(){ &:hover{ background:red; } } button{ .hover(); } css: button:hover{background:red}
4)带参数的混合
.border(@border_color){ border:1px solid @border_color}div{ .border(#FFF)}css:div{border:1px solid #FFF}
5 )带参数有默认值的混合
.border(@border_color:red){ border:1px solid @border_color}div1{.border(#FFF)}div2{.border()}css:div1{border:1px solid #FFF}div2{border:1px solid red}
阅读全文
0 0
- less的初步学习
- LESS框架应用的初步学习
- LESS学习:LESS的基础语法
- 初步认识 LESS
- 初步认识 LESS
- less的学习与实践
- Less的学习&资料整理
- 关于Less的学习笔记
- less的基础入门学习笔记,less基础教程
- Less学习
- 学习Less
- less学习
- less学习
- less学习
- less 学习
- less学习变量的定义(1)
- 编程的初步学习
- json的初步学习
- HDU 1698 Just a hook (线段树区间更新)
- 配置Nginx实现负载均衡
- Oozie基础知识:调度器简介及Oozie功能架构
- python中对于“+”符号,不同的数据类型表现的不同的行为
- 信号处理signal与sigaction函数
- less的初步学习
- POJ 2104 K-th Number (主席树)
- MarkdownPad2.5 注册码
- n 次插值的Lagrange 形式 和 Newton 形式
- JVM初窥:虚拟机性能监控与故障处理工具
- POJ3276_Face The Right Way_反转问题-1
- Keepalived+Nginx实现负载均衡高可用
- puppet
- 链表面试题(二)---链表逆序(链表反转)