Less入门笔记 

  1 // 变量定义
  2 @width:10px;
  3 @height:@width + 10px;
  4 .box {
  5     width: @width;
  6     height: @height;
  7 }
  8 
  9 //混合
 10 .border {
 11     border-top: dotted 1px black;
 12     border-bottom: solid 1px black;
 13 }
 14 .collection {
 15     color: #111
 16     .border();
 17 }
 18 
 19 //嵌套
 20 .father {
 21     color:black;
 22     .son {
 23         font-size: 12px;
 24     }
 25     .son2 {
 26         width: 30px;
 27     }
 28 }
 29 
 30 //嵌套+混合实现clearfix
 31 .clearfix {
 32     display: block;
 33     zoom: 1;
 34 
 35     &:after {
 36         content: '';
 37         display: block;
 38         font-size: 0;
 39         height: 0;
 40         clear: both;
 41         visibility: hidden;
 42     }
 43 }
 44 
 45 // 规则嵌套和冒泡
 46 .component {
 47     width: 300px;
 48     @media (min-width:760px) {
 49         width: 600px;
 50         @media (min-resolution:192dpi) {
 51             background-color: #fff;
 52         }
 53     }
 54     @media (min-width:1200px) {
 55         width: 800px;
 56     }
 57 }
 58 //相当于
 59 // .component {
 60 //     width: 300px;
 61 // }
 62 // @media(min-width:760px) {
 63 //     .component{
 64 //         width: 600px
 65 //     }
 66 // }
 67 // @media(min-width:760px) and (min-resolution:192dpi) {
 68 //     .component{
 69 //         background-color: #fff;
 70 //     }
 71 // }
 72 // @media(min-width:1200px) {
 73 //     .component {
 74 //         width: 800px;
 75 //     }
 76 // }
 77 
 78 // 运算
 79 // 单位换算
 80 @w1 : 5cm + 10mm;
 81 @w2 : 2 - 3cm + 5mm ;
 82 //计算结果以最左侧单位为准
 83 //乘除不做单位换算
 84 
 85 //转义 允许字符串作为属性值或变量值
 86 @min768: ~"(min-width: 768px)";
 87 .el {
 88     @media (@min768) {
 89         font-size: 1.2rem;
 90     }
 91 }
 92 
 93 //命名空间和访问符
 94 //mixins放置于bundle中，方便重用
 95 #bundle() {
 96     .button {
 97         border: 1px solid #000;
 98         &:hover {
 99             background-color: #333;
100         }
101     }
102 }
103 //调用bundle中的button类
104 #header a {
105     color: orange;
106     #bundle > .button;
107 }
108 
109 //映射
110 #colors() {
111     color1:blue;
112     color2:green;
113 }
114 .button {
115     color: #colors[color1];
116     border: 1px solid #colors[color2];
117 }
118 
119 //作用域(继承)
120 @var1:green;
121 #p1 {
122     @var1:white;
123     #header{
124         color: @var1;
125     }
126 }
127 @var: red;
128 #page {
129     #header {
130         //white
131         color: @var; 
132     }
133     //变量定义不必在引用前定义
134     @var:white;
135 }

 

// 变量定义
@width:10px;
@height:@width + 10px;
.box {
    width: @width;
    height: @height;
}

//混合
.border {
    border-top: dotted 1px black;
    border-bottom: solid 1px black;
}
.collection {
    color: #111
    .border();
}

//嵌套
.father {
    color:black;
    .son {
        font-size: 12px;
    }
    .son2 {
        width: 30px;
    }
}

//嵌套+混合实现clearfix
.clearfix {
    display: block;
    zoom: 1;

    &:after {
        content: '';
        display: block;
        font-size: 0;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

// 规则嵌套和冒泡
.component {
    width: 300px;
    @media (min-width:760px) {
        width: 600px;
        @media (min-resolution:192dpi) {
            background-color: #fff;
        }
    }
    @media (min-width:1200px) {
        width: 800px;
    }
}
//相当于
// .component {
//     width: 300px;
// }
// @media(min-width:760px) {
//     .component{
//         width: 600px
//     }
// }
// @media(min-width:760px) and (min-resolution:192dpi) {
//     .component{
//         background-color: #fff;
//     }
// }
// @media(min-width:1200px) {
//     .component {
//         width: 800px;
//     }
// }

// 运算
// 单位换算
@w1 : 5cm + 10mm;
@w2 : 2 - 3cm + 5mm ;
//计算结果以最左侧单位为准
//乘除不做单位换算

//转义 允许字符串作为属性值或变量值
@min768: ~"(min-width: 768px)";
.el {
    @media (@min768) {
        font-size: 1.2rem;
    }
}

//命名空间和访问符
//mixins放置于bundle中，方便重用
#bundle() {
    .button {
        border: 1px solid #000;
        &:hover {
            background-color: #333;
        }
    }
}
//调用bundle中的button类
#header a {
    color: orange;
    #bundle > .button;
}

//映射
#colors() {
    color1:blue;
    color2:green;
}
.button {
    color: #colors[color1];
    border: 1px solid #colors[color2];
}

//作用域(继承)
@var1:green;
#p1 {
    @var1:white;
    #header{
        color: @var1;
    }
}
@var: red;
#page {
    #header {
        //white
        color: @var; 
    }
    //变量定义不必在引用前定义
    @var:white;
}


posted on 2021-02-20 17:03  I666999  阅读(35)  评论(0)  编辑  收藏  举报

导航