less

这篇教程写的挺不错的：http://www.cnblogs.com/fsjohnhuang/p/4187675.html

使用一点时间之后再看。

less中文官网：http://www.bootcss.com/p/lesscss/

less中文官网：http://less.bootcss.com/  函数详细一点

 

在开发阶段，在浏览器上直接使用.less

在页面中加入 .less 样式表的链接，并将 rel 属性设置为 "stylesheet/less"：
<link rel="stylesheet/less" type="text/css" href="styles.less" />
接下来，下载 less.js 并通过 <script></script> 标签将其引入，放置于页面的 <head> 元素内：
<script src="less.js" type="text/javascript"></script>

在生产阶段，编译之后，再调用

使用winless编译。nodejs 还有点麻烦。
其实使用nodejs编译好一些，它的功能丰富一点。

 

示例1、

//变量
@font-size:20px;
@color:red;
//混合
.sfp(@color:steelblue){
	width:100px;
	height:100px;
	border-radius:5px;
	border:1px solid @color
}

h2{
	font-size: @font-size;
}

.con{
	.sfp;
　　　　 //嵌套
	p{
		color:@color;
　　　　　　　　　 //函数和运算
		font-size: @font-size * 2;
	}
}

监视模式下，html改变的话，不会自动刷新。

示例2、

//将变量名定义为变量
@fnord: "I am fnord.";
@var: 'fnord';
*{
	content: @@var;
}

示例3、@argument

.border (@width: 2px, @style: solid, @color: steelblue) {
  border: @arguments;
  border: @arguments;
  border: @arguments;
}


.con{
	.border(2px, dotted, red);
}

示例4、

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

> >= = =< <

关键字true只表示布尔真值

导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功

常见的检测函数：iscolor isnumber isstring iskeyword isurl ispixel ispercentage isem　and not

示例5、

.bordered {
  &.float {  //.bordered .float
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

示例6、

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

#header a {
  color: orange;
  #bundle > .button;
}

从后往前看一遍

javascript的表达式

//可以在less中使用js表达式
/*@var: ~`"hello".toUpperCase()+'!'`;*/
//可以访问js环境
/*@var: `document.body.clientHeight`;*/
*{
	content : @var;
}

避免编译

@var: ~`"@{str}".toUpperCase() + '!'`;
结果：@var: HELLO!;
其实就是，把~之后的内容原样输出，不会按照less和CSS处理

字符串插值：把变量嵌入到字符串

@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

import

@import "lib.less"
@import "lib"
@import "lib.css"

注释

/**/会显示在css中
//不会显示在css中

命名空间

#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

//使用
#header a {
  color: orange;
  #bundle > .button;
}

Math函数

round(1.67), ceil(2.4), floor(2.6), percentage(0.5)

运算，嵌套（&：.bordered.float）

模式匹配和引导，等用到了再看，细节有点多。

混合：跟嵌套不一样，可带参数，@argument

变量

　　

 

 

 

 

 

 

　　

posted on 2015-06-22 11:00  j.w  阅读(224)  评论(0)    收藏  举报