码迷,mamicode.com
首页 > 其他好文 > 详细

什么是less?

时间:2015-07-19 19:52:19      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:

什么是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函数一样可以传递参数,无需重复书写css

1.比如需要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%的颜色

什么是less?

标签:

原文地址:http://www.cnblogs.com/misniper/p/4659100.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!