您的位置：首页 > 其它

less

2015-06-22 11:00 253 查看

这篇教程写的挺不错的：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() + '!'`;
结果：[code]@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

变量

　　

　　

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航