码迷,mamicode.com
首页 > 其他好文 > 详细

less开发

时间:2014-12-22 15:55:00      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

http://less.bootcss.com/features/#loops-feature

 

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet/less" type="text/css" href="styles/local.less" />
</head>
<body>
<h5>本地JS解析lESS</h5>
<script src="lib/lessv2.1.0-min.js"></script>
<!--
什么是LESSCSS

LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,
如变量、继承、运算、函数等,更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
客户端的使用:
1.引用.less后缀的文件
<link rel="stylesheet/less" type="text/css" href="my.less" />
2.引用http://lesscss.org的less.js文件
<script src="less-min.js"></script>
LESS 源文件一定要在 less.js 引入之前引入,这样才能保证 LESS 源文件正确编译解析。


服务器端的引用
借助less编译器将less源文件最终生成css文件。最常用的是node的包管理器。安装less.
sudo npm install -g less (mac 尽量加上-g全局安装要不在lessc的时候我的本地找不到command not found 无法编译)

@import "base.less"后缀可以省略。引入css也是但是不能省略后缀。

less完全兼容css语法。我们将标准css文件的后缀直接改成.less格式,编译器可以完全识别。

lessc local.less 直接在控制台生成代码
lessc local.less>less.css生成文件 -x 是压缩css
lessc 可以看所有命令

 

1.变量
@color:#ff5df4;

#header{
color:@color;
}


2.混合mixins
混合可以把classA 轻松带到 classB
.round-corners(@raduis:5px){
-webkit-border-raduis:@raduis;
-moz-border-raduis:@raduis;
-ms-border-raduis:@raduis;
-o-border-raduis:@raduis;
border-raduis:@raduis;
}

#header{
.round-corners;
}
#header{
.round-corners(10px);
}


3.嵌套 一个选择器中嵌套另一个选择器实现继承。减少代码量,结构清晰。
#header{
h1{
font-size:12px;
}
p{
color:#fff;
a{
text-decoration: none;
&:hover{
border-width:2px;
}
}
}
}

4.函数的运算 加减乘除 可以属性值和颜色运算,实现属性值之间复杂关系。
@the-border:1px;
@base-color:#111;
@red:#842210;
#header{
color:(@base-color*3);
border-left:@the-border;
border-right:(@the-border*2);
}

 

less开发

标签:

原文地址:http://www.cnblogs.com/c4895007/p/4178253.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!