css预处理器------less笔记

less笔记

变量、插值

编译前：

@number: 100px;
@key :margin;
@i: 2;

.box@{i} {
    width: @number;
    height: @number;
    @{key}: auto;
}

编译后：

.box2 {
    width: 100px;
    height: 100px;
    margin: auto
}

作用域

编译前：

@number: 100px;
.box3 {
    height: @number;
    @number: 456px;
    width: @number;
}

编译后：

.box3 {
    height: 456px;
    width: 456px
}

伪类嵌套与属性嵌套

编译前：

ul {
    list-style: none;
    li {
        float: left;
        div {
            margin: 10px;
        }
        p {
            margin: 20px;
        }
    }

    &:hover {
        color: red;

        //属性嵌套
        font: {
            size: 10px;
            weight: boild;
            family: 宋体;
        };
    }
}

编译后

.box3 {
    height: 100px;
    width: 456px;
}

运算，单位，转义，颜色

编译前：

@num: 100px;

.box4 {
    width: @num*3;
    //less单位不同能进行运算，运算的单位取决于前一个数据的单位
    height: @num+10em;
    height: 10em+@num;
    //less中默认/是运算的操作，~""不进行运算
    margin: 20px/1.5;
    padding: ~"20px/1.5";
    color: #020406*2;
}

编译后

.box4 {
    width: 300px;
    height: 110px;
    height: 110em;
    margin: 13.33px;
    padding: 20px/1.5;
    color: #04080c
}

函数，混入

编译前：

.show {
    display: block;
}

//混入
//函数后加()不会被编译出来
.hide(@color) {
    display: none;
    color: @color;
}

.box6 {
    width: 100px;
    .show;
    .hide(blue);
}

编译后

.show {
    display: block
}

.box6 {
    width: 100px;
    display: block;
    display: none;
    color: #00f
}

命名空间

编译前：

#nm {
    .show {
        display: inline-block;
    }
}

.box7 {
    #nm.show;
}

.box8 {
    #nm.show;
}

编译后：

#nm .show {
    display: inline-block
}

.box7 {
    display: inline-block
}

.box8 {
    display: inline-block
}

继承

编译前：

.line {
    display: inline;
}

.box71 {
    &:extend(.line);
}

.box81 {
    &:extend(.line);
}

编译后：

.box71,
.box81,
.line {
    display: inline
}

合并

编译前：

//合并，默认用","分隔
//空格替代","方法
.box9 {
    background+: url(a.png);
    background+: url(b.png);
    transform+_: scale(2);
    transform+_: rotate(30deg);

}

编译后

.box9 {
    background: url(a.png), url(b.png);
    transform: scale(2) rotate(30deg)
}

媒体查询

编译前：

.box10 {
    width: 100px;

    @media all and (min-width: 768px) {
        width: 600px;
    }

    @media all and (min-width: 1440px) {
        width: 900px;
    }
}

编译后

.box10 {
    width: 100px
}

@media all and (min-width:768px) {
    .box10 {
        width: 600px
    }
}

@media all and (min-width:1440px) {
    .box10 {
        width: 900px
    }
}

条件

编译前：

@count: 3;
@count1: 5;

.get(@cn) when (@cn>4) {
    width: 100px+@cn;
}

.get(@cn) when (@cn<=4) {
    height: 10px+@cn;
}

.box11 {
    .get(@count);
    .get(@count1);
}

编译后

.box11 {
    height: 13px;
    width: 105px
}

循环

编译前：

@count2: 0;

.get2(@cn) when (@cn<3) {
    .get2((@cn+1));

    .box-@{cn} {
        width: 100px+@cn;
    }
}


.get2(@count2);

编译后

.box-2 {
    width: 102px
}

.box-1 {
    width: 101px
}

.box-0 {
    width: 100px
}

导入

@import './31.sass';