less应用
来源:互联网 发布:c语言界面设计 编辑:程序博客网 时间:2024/05/21 09:07
什么是less以及应用的好处:
(1) Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性.
(2)定义变量,直接调用,不用重复造轮子.
1.less定义一个变量:
@baseColor:red; Body{background-color:@baseColor};
这个变量在同一个less文件中全局都可以使用,在使用之前,必选先定义一个变量。
2.less 定义一个函数:(注意参数一定要用@开头,否则报错)
.font_size(@font_size){
font-size: @font_size/30 ;
}
在需要调用的地方直接调用 .font_size(120rem); 这种是必须传值的,还有一种是有默认值的eg: .font_size(@font_size:20px),如果不传值,默认值为20px.
函数定义一定要记得在函数前加'.', 函数体内定义的变量作用域也只是函数体内,
@comment_color:#00ff00;
#test{
@comment_color:red;
.font_size(120rem);
background: white;
color: @comment_color;
}
border所设置的颜色为行数体内的颜色,如果函数体内没有颜色,就会到体外去找直到找到为止,找不到就会报错。 3.条件判断
可以在类函数定义时候使用条件判断
.border(@a)
when (@a>10),(@a<3){
border:@a solid blue;
}
.con1{.border(5px)}
这里的条件是大于10或者小于3,所以调用不成立
.border(@a)
when (@a>10) and (@a<15){
border:@a solid blue;
}
.con1{.border(12px)}
这里的条件是大于10并且小于15 ,调用成立,条件语句中那个px可以加也可以不加,判断都通过 还可以使用内置函数unit来增加或者取出单位
.border(@a) { border:unit(@a,px) solid red; }
.con2{.border(5)} 输出 .con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5
4 & 代替父级元素:
<div class="test1"> <div class="test2"> <p class="test2_title">test2_title</p> </div> <div class="test3"> <p class="test3_title">test3_title</p> </div></div>
.test1{ height: 120px; & .test2{ font-size: 4rem; color: black; } & .test3{ font-size: 6rem; color: yellow; }}还有很多可以参考less中文网:http://less.bootcss.com/features/#features-overview-feature
- less应用
- less的应用
- less简单应用
- less
- less
- LESS
- less
- less
- less
- less
- less
- LESS
- less
- less
- less
- Less
- LESS
- Less
- 重载运算符
- 堆栈是什么意思?
- memcached-2-理解memcached的内存存储
- 字符串判断空
- 自定义字符分割函数
- less应用
- 谢谢我的兄弟们
- 快速沃尔什变换(FWT)讲解 解决集合卷积的方法
- 图论-最小生成树算法
- Properties类实现键值对的写入和写出(键值对存储)及Properties集合的遍历
- Connecticut Medal of Science goes to Yale’s Robert Schoelkopf
- memcached-3-memcached的删除机制和发展方向
- Java并发笔记一
- 获取文件夹下所有子文件夹名