预处理器：lesscss.cn
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/less">
#wrap{
width: 300px;
height: 300px;
border: 1px solid red;
.inner{
width:100px;
height: 100px;
background: black;
}
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner">
</div>
</div>
</body>
<script src="../js/less.js"></script>
</html>
这种方式缺点：
1、多一个js文件
2、这是运行时编译
更改：
使用预编译
less编译工具
koala：官网：www.koala-app.com
使用方法：将less文件所在目录拖拽到koala里，生成一个css文件
less注释
// 这是见不得人的注释 不会编译到css文件中
/* 这是想暴露出去的注释*/ 会编译到css文件中
less变量
使用@来申明一个变量：@pink:pink;
1、作为普通属性值只来使用：直接使用@pink
2、作为选择器和属性名：#@{selector的值}的形式
3、作为url:@{url}
4、变量的延迟加载
@var:0;
.class{
@var:1;
.brass{
@var:2;
three:@var;//3 等函数加载完了才加载此句
@var:3;
}
one:@var;//1
}
less嵌套规则
1、基本嵌套规则
2、&的使用
less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1普通混合
2不带输出的混合
3带参数的混合
4带参数并且有默认值的混合
5带多个参数的混合
6命名参数
7匹配模式
8arguments变量