上一次简单介绍了一下bootstrap这个开源框架,这次继续bootstrap深入之路,从Less说起。。。。
关于less
less是一门预处理语言,是对css的扩展,它使得css语言了动态语言的一些特性,如变量,继承,运算,函数等,使得css更加灵活强大,less的语言很简单,学习了css的朋友对于less的语法,上手基本没有难度。现在来看看less的以下特性:
-
变量
less中这样定义变量:@fontsize:14px;使用变量,h3{font-size:@fontsize},编译后的css就是h3{font-size:14px;}
-
继承
利用less可以将一个定义好的类A引入类B中,从而实现类B对类A的继承
.A{font-size=15px;border:1px 0px;padding:15px;10px;}
#header{ color:red;.A;}
-
函数
less可以创建一个函数,从而实现css更大的灵活性
.A(@color:#fffff){font-size=15px;border:1px 0px;padding:15px;10px;color:@color}
#header{.A(#ccccc)}
编译后#header{font-size=15px;border:1px 0px;padding:15px;10px;color:#cccccc}
-
运算
在less中可以对属性进行四则运算
@my-border:1px;
@my-color:#cccccc;
#header{border:(@my-border * 2);
font-color:(@my-color+#acbcfc);
}
-
编译
LESSCSS的使用是很容易的,首先,使用你最常使用的代码编辑器,按LESSCSS的语法规则写好.less文件,接下来,使用编译工具它编译成.css,最后再引入页面即可。
客户端的less使用,先在页面中引入.less样式表----<link rel="stylesheet/less" type="text/css" href="styles.less" />(注意:rel是"stylesheet/less")
然后下载less.js并引入到页面<head> </head>之中,<script src="less.js" type="text/javascript"></script>(注意:要先加载样式表)
关于less的更多语言细节及使用可以访问http://less.bootcss.com/features/或者上github上去fork一个看一下, github地址:https://github.com/less/less.js