文档章节

about lesscss~

大勤快
 大勤快
发布于 2013/09/06 00:33
字数 769
阅读 85
收藏 1

话说,真心觉得lesscss是个神奇的存在~~它可以扩展css功能~你可以使用变量、函数、混合、继承等更方便的去编写和维护 CSS,以更少的代码完成更多的样式,非常适合程序猿们~~我也是刚刚学lesscss,整理下学习笔记~~

对了,如果各位看客没有接触过lesscss,先来这儿瞅眼:http://www.lesscss.net/article/home.html

当当当当~正文开始
在写lesscss之前,我们仍然需要prepros这个工具,打开prepros,打开你的编辑器(我用的是sublime text2),然后新建个less.html,再新建一个文件夹less,文件夹里面新建一个index.less,,之后我们在index.less里头写点什么吧~~代码如下:

@import "function.less";

@color: #4D926F;

#header {
    color: @color;
}

h2 {
    color: @color;
}

之后我们在prepros里面点击,回到文件目录下,你发现了什么,哈哈,很神奇吧,多了个index.css的文件,让我们回到sublime按shift+alt+2,把index.css拖拽到新出来的空白区域,我们对比一下:

好玩吧~~less其实和css差不多,但是css我们是不能定义变量的,比如一个完整的整站都用了#4d926f这个颜色,包括边框和字体,突然有一天老板说我不喜欢#4d926f了,改成#ccc吧,你就要把之前#4d926f的地方找到,改成#ccc,但是如果你之前用less去定义好了一个变量,比如@sitecolor:#4d926f;要改什么颜色直接改这个变量就可以了~~锵锵锵~~是不是很方便~~\(≧▽≦)/~

我们继续在index.less里面写个小例子,代码如下:

.list{ border: #f09 solid 1px; list-style: none; padding: 0;
	li{ border: #ccc solid 1px; margin: 10px; }
}
然后点一下右边的index.css,哇~~我们发现它的代码变成了下面的样子:
.list {
  border: #f09 solid 1px;
  list-style: none;
  padding: 0;
}
.list li {
  border: #ccc solid 1px;
  margin: 10px;
}
我们之前写css,如果.list里面的li,我们必须.list li {} 这样虽然没什么难度,但是语法看起来并不是一个整体,less提供了语法嵌套,我们可以直接写:
.list{   
  li{}   
  a{}   
 }       


OK,继续跟我走~~~下面让我们用lesscss做个圆角效果~我们在刚刚的less文件夹里新建个function.less,然后敲上如下代码:
.border-radius(@radius: 3px){ border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; }
之后回到index.less,在最上面加上@import "function.less";再把list重新定义一下,代码如下:
@import "function.less";
.list{ width: 500px; border: #f09 solid 1px; list-style: none; padding: 0; .border-radius(10px);
	li{ border: #ccc solid 1px; .border-radius(); margin: 10px; }
}

让我们看看index.css发生了什么变化,代码如下:

.list {
  width: 500px;
  border: #f09 solid 1px;
  list-style: none;
  padding: 0;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
.list li {
  border: #ccc solid 1px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  margin: 10px;
}

运行看看效果吧~~


OK啦, less可以处理一些常用的 CSS3 处理效果,我这里就整理出来一个,还有其他的方块阴影啊,元素过渡效果啊,颜色计算啊这些,有兴趣的可以百度看看,自己写写~~ 挺有意思的,对吧~~

师父,你教我的lesscss我整理完咯~~~

© 著作权归作者所有

大勤快
粉丝 37
博文 10
码字总数 7307
作品 0
海淀
网页/平面设计
私信 提问
Less.js 2.6.1 发布,CSS 预处理器

Less.js 2.6.1 发布,该版本改进内容包括: Update Less.js dependencies Fix comments after named color regression use instanceof operator instead of class comparison optimization d......

oschina
2016/03/05
1K
0
Less.js 2.5.1 发布,CSS 预处理器

Less.js 2.5.1 发布,该版本修复了三个 Bug: Fix problems with less being async in some browsers Minor fix only likely to affect programmatic usage of ruleset find Fix error when ......

oschina
2015/05/22
1K
2
推荐下自己修改升级的 Less 即时编译CSS插件 for Sublime Text 3

最近需要在 Sublime Text 3 下使用 Less(什么是Less),但是发现无法即时编译,很不方便。于是到 github 上搜索,发现了一款Sublime Text2 的即时编译插件,但是该插件的py脚本是基于 pyth...

山哥
2015/02/03
9.8K
12
Less CSS 可以用循环吗

用LESSCSS操作变量,例如 @height:5px; #header{ height:@height;} 我想@height在循环里面自加.可以实现吗..

wilson111
2012/03/01
2.6K
3
Less.js 2.5.0 发布,CSS预处理器

Less.js 2.5.0 发布,此版本主要更新信息如下: supports the scoped @plugin directive to load function plugins All directives are bubbled (e.g. supports), not just media Performanc......

oschina
2015/04/04
1K
1

没有更多内容

加载失败,请刷新页面

加载更多

安得一颗光明心——《王阳明大传》的读后感作文4100字

安得一颗光明心——《王阳明大传》的读后感作文4100字: 偶然听到一个关于王阳明的讲座,简直让我入了迷。多年前接触到阳明,是在思想史中读到的对阳明心学的介绍,晦涩难懂的学术词汇,让我...

原创小博客
23分钟前
0
0
单点登录-基于Redis+MySQL实现单点登录(SSO)

1. 为什么要用单独登录? 主要便于公司内部多系统统一认证授权管理,一次登录可访问多个跨域系统,也同时更加方便统一管理用户登录(员工离职需要拿掉登录权限、统计所有用户对系统的登录请求...

秋日芒草
37分钟前
1
0
827. Making A Large Island

思想: 将所有连通的 1 分成一个组,分配编号,然后使用BFS统计1的个数,得到这个组的面积。 遍历格子里所有为 0 的元素,检查四个方向的1所在的组并加上这个组面积。于是得到当前元素为 0 ...

reter
44分钟前
1
0
亿万pv的混合云规划实施

基础服务: keepalive,lvs,nginx,dns,ntp,redis集群,yum仓库,web资源 网络高可用 防火墙冗余,交换机堆叠 专线互联 物理机虚拟化 VMware vcenter/ Proxmox...

以谁为师
今天
4
0
聊聊dubbo的LRUCache

序 本文主要研究一下dubbo的LRUCache LRUCache dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/utils/LRUCache.java public class LRUCache<K, V> extends LinkedHashMap<......

go4it
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部