初识less

1.less的引用

less是css的预编译

 

预编译器：考拉koala

注释符号：//只在less中显示

/**/在css和less中显示

 

直接引用less文件还需引入less.js,注意rel="stylesheet/less";一般是编译后引用

2.less的变量

普通变量格式：@变量名：值；用法：@变量名；

作为选择器和属性名：@变量名：值；用法：@{变量名}

地址变量：@变量名：“绝对路径”；用法：url（“@{变量名}图片名称”）

3.混合

普通混合：.类名{};用法在需要添加的样式中加.类名

不带输出的混合：.类名(){};用法在需要添加的样式中加.类名

带选择器的混合：.类名(){  &:hover{}  } 当鼠标滑过的效果；用法在需要添加的样式中加.类名

带参数的混合：.类名(@变量){ 属性：@变量；}；用法在需要添加的样式中加.类名（参数）

带参数且有默认变量的混合：.l类名(@变量：默认值){  属性：@变量；}；用法在需要添加的样式中加.类名；

　　　　格式：参数间用分号隔开，当与分号混用时多个逗号也只表示一个参数

　　　　.my(@color:green;@margin:200px 300px){
　　　　　　background: @color;
　　　　　　margin: @margin;
　　　　}
　　　　header{
　　　　　　.my(red;100px  300px);
　　　　}//编译后margin:100px 300px;

　　　　当只有逗号作为分割符时

　　　　header{
　　　　　　.my(red，100px  300px);
　　　　}//编译后margin:100px 300px;

命名参数：使用命名参数可以使参数顺序不一致

　　header{
　　　　.my(@margin:10px 20px);
　　}

@arguments代表所有参数

匹配模式：定义一个特定的字符串，使用时带上字符串

　　.my(b_g,@color:green){
　　　　background: @color;

　　}
　　.my(b_y,@color:yellow){
　　　　background: @color;

　　}
　　.my(b_p,@color:pink){
　　　　background: @color;
　　}
　　header{
　　　　.my(b_p);
　　　}

混合的返回值：

.add(@x,@y){
@average:(@x+@y)/2

}
header{
.add(20px,30px);//注意此处应该写单位
margin: @average;
}