###less
less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。
less的中文官网：http://lesscss.cn/
bootstrap中less教程：http://www.bootcss.com/p/lesscss/
###Less编译工具
koala 官网:www.koala-app.com
###less中的注释
以//开头的注释，不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
###less中的变量
使用@来申明一个变量：@pink：pink;
1.作为普通属性值只来使用：直接使用@pink
2.作为选择器和属性名：#@{selector的值}的形式
3.作为URL：@{url}
4.变量的延迟加载
###less中的嵌套规则
1.基本嵌套规则
#wrap{ #inner{ } } <div id="wrap"> <div id="inner"></div> </div>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/less">
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;
300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
#inner{
100px;
height: 100px;
background: pink;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
}
</style>
<script src="../less/less.min.js"></script>
</head>
<body>
<div id="wrap">
<div id="inner"></div>
</div>
</body>
</html>
*{ margin: 0; padding: 0; } #list{ list-style: none; line-height: 30px; 300px; background: pink; margin: 0 auto; li{ height: 30px; } a{ float: left; &:hover{ /*&代表父级*/ color: red; } } span{ float: right; } }
2.&的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index1.css"/>
</head>
<body>
<div id="wrap">
<div id="inner"></div>
</div>
</body>
</html>
//定义变量 @zero:0; //定义id选择器 @selector:#wrap; //定义宽 @w:width;
//颜色选择
background: url("../img/zdy.jpg");
//变量的延迟加载
.class { one: 1; } .class .brass { three: 3; }
###less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
1.普通混合
.juzhong{
}
#box1{
.juzhong;
}
#box2{
.juzhong;
}
2.不带输出的混合
.juzhong(){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } #box1{ 100px; height: 100px; background: pink; .juzhong; } #box2{ 100px; height: 100px; background: deeppink; .juzhong; }
3.带参数的混合
.juzhong(@w,@h,@c){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; @w; height: @h; background: @c; } #box1{ .juzhong(100px,100px,pink); z-index: 1; } #box2{ .juzhong(200px,200px,deeppink); }
4.带参数并且有默认值的混合
.juzhong(@w:100px,@h:100px,@c:pink){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; @w; height: @h; background: @c; } #box1{ //默认值 .juzhong; z-index: 1; } #box2{ .juzhong(200px,200px,deeppink); }
5.带多个参数的混合
6.命名参数
.juzhong(@w:100px,@h:100px,@c:pink){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; @w; height: @h; background: @c; } #box1{ .juzhong(); z-index: 1; } #box2{ .juzhong(@h:200px;@c:deeppink;); }
7.匹配模式
*{ margin: 0; padding: 0; } /*向上的三角*/ .triangle(top,@w:10px,@c:pink){ border-@w; border-color: transparent transparent @c transparent ; border-style:dashed dashed solid dashed ; } /*向下的三角*/ .triangle(bottom,@w:10px,@c:pink){ border-@w; border-color: @c transparent transparent transparent ; border-style:solid dashed dashed dashed ; } /*向左的三角*/ .triangle(left,@w:10px,@c:pink){ border-@w; border-color: transparent @c transparent transparent ; border-style: dashed solid dashed dashed ; } /*向右的三角*/ .triangle(right,@w:10px,@c:pink){ border-@w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } .triangle(@_,@w:10px,@c:pink){ 0; height: 0; overflow: hidden; } #sanjiao{ .triangle(top,50px,deeppink); } #sanjiao2{ .triangle(bottom); } #sanjiao3{ .triangle(left); } #sanjiao4{ .triangle(right); }
8.arguments变量
*{ margin: 0; padding: 0; } .border(@w:10px,@style:solid,@c:deeppink){ border: @arguments; } #wrap{ 200px; height: 200px; background: pink; .border(); }
###less运算
在less中可以进行加减乘除的运算
#wrap{ @w * 100 ; height: 200px; background: pink; }
###less避免编译
*{ margin: 0; padding: 0; } #wrap{ ~"calc(200px + 700px)"; }
###less继承
.juzhong(@w:100px,@h:100px,@c:pink){ &:extend(.common all); @w; height: @h; background: @c; } #wrap{ position: relative; margin: 0 auto; 400px; height: 600px; border: 1px solid; } #box1{ .juzhong(); z-index: 1; } #box2{ .juzhong(@h:200px;@c:deeppink;); }
性能比混合高
灵活度比混合低