首页 > 代码库 > less开发
less开发
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="http://www.mamicode.com/styles/local.less" />
</head>
<body>
<h5>本地JS解析lESS</h5>
<script src="http://www.mamicode.com/lib/lessv2.1.0-min.js"></script>
<!--
什么是LESSCSS
LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，
如变量、继承、运算、函数等，更方便CSS的编写和维护。
LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
客户端的使用：
1.引用.less后缀的文件
<link rel="stylesheet/less" type="text/css" href="http://www.mamicode.com/my.less" />
2.引用http://lesscss.org的less.js文件
<script src="http://www.mamicode.com/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开发