less-混合

混合（Mixin）.PNG

// 无参数方法
.card {
    // 等价于 .card()
    background: #f6f6f6;
    -webkit-box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58)
}
#wrap {
    .card; // 等价于.card()
}

// .与#皆可作为方法前缀
// 方法后写不写()看个人习惯

// less可以使用默认参数，如果没有传参数，那么将使用默认参数
// @arguments犹如JS中的arguments指代的是全部参数
// 传的参数中必须带着单位

.border(@a: 10px, @b:50px, @c: 30px, @color: #000) {
    border: solid 1px @color;
    box-shadow: @arguments; // 指代的是 全部参数
}

#main {
    .border(0px, 5px, 30px, red); // 必须带着单位
}

#wrap {
    .border(0px)
}
#content {
    .border; // 等价于.border()
}

// 方法的匹配模式,与面向对象中的多态很相似
.triangle(top, @width: 20px, @color: #000) {
    border-color: transparent transparent @color transparent;
}
.triangle(right, @width: 20px, @color: #000) {
    border-color: transparent @color transparent transparent;
}

.triangle(bottom, @width: 20px, @color: #000) {
    border-color: @color transparent transparent transparent;
}

.triangle(left, @width: 20px, @color: #000) {
    border-color: transparent transparent transparent @color;
}

.triangle(@_, @width: 20px, @color: #000) {
    border-style: solid;
    border-width: @width;
}
#main{
    .triangle(left, 50px, #999)
}
// 第一个参数left会找到方法中匹配程度最高的，如果匹配程度相同，将全部选择，并存在着样式覆盖替换
// 如果匹配的参数是变量，则将会匹配，如@_

// 方法的命名空间，让方法更加规范
#card(){
    background: #723232;
    .d(@w: 300px) {
        width: @w;

        #a(@h: 300px) {
            height: @h; // 可以使用上一层传递进来的方法

        }
    }
}

#wrap {
    #card > .d > #a(100px);  // 父元素不能加 括号
}
#main {
    #card .d();
}

#con {
    // 不得单独使用命名空间的方法
    //.d()如果前面没有引入命名空间 #card， 将会报错
    #card; // 等价于#card();
    .d(20px); // 必须先引入 #card
}

//在CSS中>选择器，选择的是儿子元素，就是必须与父元素有直接血缘的元素
// 在引入命名空间的时候，如使用>选择器，父元素不能加括号
// 不得单独使用命名空间的方法，必须先引入命名空间，才能使用其中方法
// 子方法 可以使用上一层传进来的方法

// less没有if else，但是他有when

#card {
    // and运算符，相当于 与运算&&, 必须条件全部符合才会执行
    .border(@width, @color, @style) when (@width>100px) and (@color=#999) {
        border: @style @color @width;
    }

    // not运算符，相当于 非运算 !, 条件为 不符合才会执行
    .background(@color) when not (@color>=#222) {
        background: @color;
    }

    //, 逗号运算符：相当于 或运算 ||， 只要有一个符合条件就会执行
    .font(@size: 20px) when (@size>50px), (@size<100px) {
        font-size: @size;
    }
}

#main {
    #card > .border(200px, #999, solid);
    #card .background(#111);
    #card > .font(40px);
}

// 比较运算有： >  >=  =  =<  <
// = 代表的是等于
// 除去关键字true以外的值都被视为false

// 数量不定的参数
// 如果你希望你的方法接受数量不定的参数，你可以使用...，犹如ES6的扩展运算符

.boxShadow(...) {
    box-shadow: @arguments;
}
.textShadow(@a, ...) {
    text-shadow: @arguments;
}

#main {
    .boxShadow(1px, 4px, 30px, red);
    .textShadow(1px, 4px, 30px, red);
}

//方法使用important!
.border {
    border: solid 1px red;
    margin: 50px;
}

#main {
    .border() !important;
}

// 循环方法 less没有提供for循环功能，但这也难不倒聪明的程序员，使用递归去实现。
// 官网中的Demo模拟生成了栅格系统

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n)
    }
    .generate-columns(@n, (@i + 1))
}

// 属性拼接方法 +_代表的是空格； +代表的是逗号

// 逗号
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
    .boxShadow();
    box-shadow+: 0 0 20px black; 
}

// 空格
.Animation() {
    transform+_: scale(2); 
}
.main {
    .Animation();
    transform+_: rotate(15deg); 
}

.average(@x, @y) {
    @average: ((@x + @y) / 2)
}
div {
    .average(16px, 50px); // 调用 方法
    padding: @average;    // 使用返回值
}