前端学习(七）less（笔记）

less---处理器：koala_2.0.4_portable

属于css预处理语言，可以让你的css语言更有逻辑性！

编译css的！

准备工作：
    1.项目：
        js
        css
        img
        less
    2.less：
        a1.less

3.把项目拖到编译软件里
        点击绿色按钮：在css文件夹里会编译出一个a1.css

4.开始写页面

1.新建index.html
        2.在index.HTML里面引入编译出来的a1.css
        3.在index.HTML里面写标签，在a1.less里面写样式！

4.在a1.less里面写less方法的样式
---------------------------------------------------

less方法：

1.样式值变量！

变量：名字

例子：
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

div{width:@w; height:100px; border:@b @da @back;}
p{width:@w;height:200px; background:@back;border:@b solid red;}

2.运算！

例子：
@w:300px;
@b:3px;
@back:#000;
@da:dashed;

.box1{width:@w+300px; height:100px-50px; border:@b @da @back;}
p{width:@w;height:200px+@w; background:@back;border:@b solid red;}
.box2{width:@w/3; height:100px*5; border:@b @da @back;}

3.嵌套：
    最好嵌套4层！
html：
<div class="box">
    <div class="t-box">
        <ul>
            <li>
                <div class="box1">
                    <p>
                        <a href></a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>

less:
.box{
    width:100px;
    t-box{
        width:100px;
        ul{
            height:100px;
            li{
                width:100px;

}
        }
    }
}

.box ul li{
    .box1{
        width:300px;
        p{
            width:200px;
            a{
                font-szie:100px;
            }
        }
    }
}

4.伪类：

css:
a{color:red}
a:hover{color:blue};

less:
a{
    color:red;
    &:hover{
        color:green;
    }
}

----------------------------
css:
.clearfix:after{display:block; content:'';clear:both}
.clearfix{zoom:1};

less:
.clearfix{
    zoom:1;
    &:after{
        display:block;
        content:'';
        clear:both;
    }
}

====================================================
5.定义一个选择器

例子：
.text{----定义一个class选择器
    line-height:100px;
    text-align:center;
}

div{
    width:100px;
    height:100px;
    border:2px solid red;
    .text;---调用上面的选择器
}
p{
    width:100px;
    height:100px;
    border:2px solid blue;
    .text;---调用上面的选择器
}
---------------------------------------------
6.定义选择器加传参：
例子：
.text(@num){
    line-height:@num;
    text-align:center;
}

div{
    width:100px;
    height:100px;
    border:2px solid red;
    .text(100px);
}
p{
    width:100px;
    height:200px;
    border:2px solid blue;
    .text(200px);
}

------------------------------------------
7.有默认值的传参！

.text(@num:100px){
    line-height:@num;
    text-align:center;
}

.box1{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box2{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box3{
    width:100px;
    height:100px;
    border:2px solid red;
    .text();
}
.box4{
    width:100px;
    height:400px;
    border:2px solid red;
    .text(400px);
}
p{
    width:100px;
    height:200px;
    border:2px solid blue;
    .text(200px);
}

8.多个传参