css----less预处理器
###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>
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/less"> *{ margin: 0; padding: 0; } #wrap{ position: relative; width: 300px; height: 300px; border: 1px solid; margin: 0 auto; #inner{ width: 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; width: 300px; background: pink; margin: 0 auto; li{ height: 30px; } a{ float: left; &:hover{ /*&代表父级*/ color: red; } } span{ float: right; } }
2.&的使用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!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{ width: 100px; height: 100px; background: pink; .juzhong; } #box2{ width: 100px; height: 100px; background: deeppink; .juzhong; }
3.带参数的混合
.juzhong(@w,@h,@c){ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; width: @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; width: @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; width: @w; height: @h; background: @c; } #box1{ .juzhong(); z-index: 1; } #box2{ .juzhong(@h:200px;@c:deeppink;); }
7.匹配模式
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
*{ margin: 0; padding: 0; } /*向上的三角*/ .triangle(top,@w:10px,@c:pink){ border-width:@w; border-color: transparent transparent @c transparent ; border-style:dashed dashed solid dashed ; } /*向下的三角*/ .triangle(bottom,@w:10px,@c:pink){ border-width:@w; border-color: @c transparent transparent transparent ; border-style:solid dashed dashed dashed ; } /*向左的三角*/ .triangle(left,@w:10px,@c:pink){ border-width:@w; border-color: transparent @c transparent transparent ; border-style: dashed solid dashed dashed ; } /*向右的三角*/ .triangle(right,@w:10px,@c:pink){ border-width:@w; border-color: transparent transparent transparent @c; border-style: dashed dashed dashed solid; } .triangle(@_,@w:10px,@c:pink){ width: 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{ width: 200px; height: 200px; background: pink; .border(); }
###less运算
在less中可以进行加减乘除的运算
#wrap{ width:@w * 100 ; height: 200px; background: pink; }
###less避免编译
*{ margin: 0; padding: 0; } #wrap{ width:~"calc(200px + 700px)"; }
###less继承
.juzhong(@w:100px,@h:100px,@c:pink){ &:extend(.common all); width: @w; height: @h; background: @c; } #wrap{ position: relative; margin: 0 auto; width: 400px; height: 600px; border: 1px solid; } #box1{ .juzhong(); z-index: 1; } #box2{ .juzhong(@h:200px;@c:deeppink;); }
性能比混合高
灵活度比混合低
古人学问无遗力,少壮工夫老始成。
纸上得来终觉浅,绝知此事要躬行。