首页 > 其他 > 详细

less

时间:2015-06-22 12:23:44      阅读:112      评论:0      收藏:0      [点我收藏+]

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

使用一点时间之后再看。

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

 

在开发阶段,在浏览器上直接使用.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;
}

  

less

原文:http://www.cnblogs.com/wang-jing/p/4593019.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!