什么是less?
2015-07-19 18:12
344 查看
什么是less?
简单的说,你可以在你的css文件中使用变量、函数等方式来编写你的css。less具有哪些功能?
混入(Mixins)——class中的class;参数混入——可以传递参数的class,就像函数一样;
嵌套规则——Class中嵌套class,从而减少重复的代码;
运算——CSS中用上数学;
颜色功能——可以编辑颜色;
名字空间(namespace)——分组样式,从而可以被调用;
作用域——局部修改样式;
JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
怎样在你的项目中使用less?
1.首先下载less.js。2.创建你的less文件,如index.less。
3.在你的中引入上面2个文件
rel="stylesheet/less" type="text/css" href="css/index.less"/>
这里要注意2点:一是link标签的rel属性必须是’stylesheet/less’,二是less.js必须在index.less之后引入。
现在你就可以正式体验less了。
1.嵌套
像嵌套html一样嵌套书写css.wrap{background:@gray;padding:30px;h1{font:18px/2 ‘microsoft yahei’}}
2.混入
无须在html上添加多个class,只需要在css中就可以做到.box2{.wrap}
3.参数混入
像js函数一样可以传递参数,无需重复书写css1.比如需要css3的圆角效果首先定义一个类,圆角值作为参数传入,并设置5px的默认值:
.border(@a:5px){-webkit-border-radius:@a;-moz-border-radius:@a;border-radius:@a;}
2.使用:.box3{.border(20px)}
4.选择器继承
感觉这个功能跟混入有点类似,没多大用5.运算
这个比较实用,使用数字或变量进行运算@base_margin: 10px;
@double_margin: @base_margin * 2;
使用:.box5{.border(10px);border:@base_width / 2 solid #ccc}
6.color函数
lighten函数:通过百分比来减轻颜色;less还提供其他变暗或者调整颜色饱和度函数lighten(@gray, 10%),实际上只显示 @gray 90%的颜色
相关文章推荐
- nyoj 139——我排第几个|| nyoj 143——第几是谁? 康托展开与逆康托展开
- Unable to find 'struts.multipart.saveDir' property setting.
- 在Ubuntu 14.04 64bit上安装批量图片处理器XnConvert
- 结构体的浅copy和深copy
- window.location.href和window.location.reload()方法在ajax提交后返回页面重新加载时候的区别
- Android中dip、dp、sp、pt和px的区别
- 关于HttpServlet和Servlet以及doPost和doGet关系
- JSP之application对象
- view.inflate异常:Binary XML file line #34: Error inflating class null
- [剑指Offer]5.二维数组中的查找
- IOS TableView滑动不灵敏问题
- solr和mysql建立索引
- nginx + rtmp 搭建流媒体服务器
- JSP for loop output all elements of an array
- 获得超级管理员的权限
- MongoDB sharding 算法
- Linux 解决文件删除,但并没有改变磁盘可用性
- MySQL的链接,查看数据库,使用数据库,查看表
- 中国天气网接口返回json格式分析及接口(XML、图片接口)说明
- Open Source LTE 开源LTE 简介