less小结

less是预编译css语言，是css的超集。此文只是个人的一些总结归纳，仅供参考。如果想深入了解可以细看官网。

目录

1、注释
2、变量
3、嵌套
4、继承
5、函数（mixin）

1、注释

.less后缀的文件并不能直接在浏览器上识别，所以需要借助第三方工具编译，我用的是koala。
//单行注释， 不会附加在编译后的文件上
/* 多行注释 会附加在编译后的文件上 */

2、变量

// 定义less变量使用的是@符号，稍微注意下
// 定义sass变量使用的是$符号，稍微注意下
//1.变量名可以由字母、数字、_和-组成
//2.less变量可以使用类似@tagName: section;注意在用于选择器部件或者是字符串拼接的时候，必须使用使用@{tagName}才会生效，作为属性的时候可以直接@tagName
//3.less在使用变量的时候有作用域的，优先选择最靠近的less变量使用。存在使用less变量的过程中会有懒加载的情况。

@color: blue;
@font-size: 20px;
h1 {
    color: @color;
    font-size: @font-size;
}
@tagName: section;
@height: height;
@{tagName} {
    @{height}: 100%;
}
@changedColor: green;
div {
    ul {
        li{
            color: @changedColor;
            // 那么此时就是这个最靠近了，less找的就会是这个变量对应的颜色值
            @changedColor: pink; 
        }
        // 虽然你放在了下面，less会发挥懒加载机制，优先找最靠近的变量
        @changedColor: #f00;
    }
}

3、嵌套

//可以直接嵌套区分上下层级关系，也可以利用父选择器引用，采用&可以引用完整的父选择器
@pink: pink;
@black: black;
.container {
    padding: 20px;
    background-color: @pink;
    > div {
   　　width: 100px;
    }
    .aside {
   　　width: 200px;
    }
    button {
        margin: 10px;
        color: @pink;
    }
    div {
        padding: 15px 10px;
        color: @black;
        // 在这个div的后面加多一个after伪类，并添加以下内容
        &:after {
            display: block;
            content: '英文名是jam!';
            color: #909090;
            font-weight: bold;
            font-size: 50px;
            font-family: "Microsoft YaHei";
            border: 1px solid @pink;
        }
        &-msg{
            color: blue;
       }
       & > & {
            font-size: 50px;
        }
    }
}

4、继承

//单继承与多继承
.baseClass {
    color: #f00;
}
.baseClass2 {
    font-weight: 500;
}
//方式一，多重继承的，用逗号隔开就行了
.myClass:extend(.baseClass, .baseClass2) {
    // .myClass类拥有的属性
    background-color: yellow;
    color: green;
}
//方式二，多重继承的，用逗号隔开就行了
.myClass2 {
    // &代表当前.myClass2这个类
    &:extend(.baseClass, .baseClass2);
    // .myClass2类拥有的属性
    font-size: 50px;
}

//less不支持继承泛型的子类
*.button {
    font-size: 12px;
}
//less要继承就继承泛型，比如*.button，不支持继承div.button，特别注意下
.myClass {
    // &:extend(div.button);   // 这样写是会有问题的，继承不过来
    &:extend(*.button);
}

//less不支持多匹配相似度继承
[name=xx] {
    border: 1px solid red;
}
[name="xx"] {
    border: 1px solid green;
}
[name='xx'] {
    border: 1px solid blue;
}
.myClass {
    &:extend([name="xx"]);   // 这样写不太好，它会把每个相似的都继承过来，稍微注意下
}

//在实现less深度继承的时候外层结构顶级随意，里层对应的.className必须保持一致，深度继承语法为.myClass{&:extend(.className)};，当如果不写all参数的时候只会继承最顶层的样式，如果写成.myClass{&:extend(.className all)};则把子类也一起继承过来了
.base {
    color: #f00;
    .base2 {
        font-size: 20px;
    }
}
.myClass {
    // &:extend(.base);
    &:extend(.base all);
    text-decoration: line-through;
}

//媒体查询与继承：
//1.在相同的的媒体查询范围内嵌套和继承都是没问题的
//2.在媒体查询外部的css代码的类或标签的选择器是可以继承媒体查询内部的，而且继承的时候是可以继承所有匹配相同的选择器的
@media screen {
    h1 {
        font-size: 50px;
    }
    @media (min-width: 500px) {
        h2 {
            color: #f00;
        }
        @media (max-width: 1500px) {
            h1 {
                font-family: "SimSun";
            }
            strong {
                font-weight: normal;
                font-style: normal;
            }
            .myClass {
                // 只能继承媒体查询内部同级标签，比如strong
                &:extend(strong);
                // 继承不了不是媒体查询内部同级标签h1，h2
                // &:extend(strong, h2, h1);
            }
        }
    }
}
//在媒体查询外部的css代码的类或标签的选择器是可以继承媒体查询内部的，而且继承的时候是可以继承所有匹配相同的选择器的
.testClass:extend(h1) {
    background-color: blue;
}

5、函数

//less本身自带有很多内置函数，我就不一一介绍，有兴趣的可以看看官网的API，在这里我主要想说一下mixin

//如果mixin函数传入的形势参数都设置了默认值，那么我们在调用less函数的时候直接调用就行了，可以不用传入任何参数。如果less函数传了第一个参数，第二个没有传，可以指定形参名称绕过第一个参数来
//参数后面加...，表示在调用less函数的时候可以传入无数个实际参数
@color: #000;
@font-size: 80px;
.myClass (@color, @font-size...) {
    color: @color;
    font-size: @font-size;
}
// 调用less函数，注意调用的时候一定要在某个选择器里面去调用less函数
h1 {
    .myClass (@font-size: @font-size, 1, 2, 3);
}

//mixin内置两个特殊的对象 @arguments 和 @reset 。@arguments代表mixin的所有入参,而@reset代表mixin的...入参数组。
.xx-border (...) {
    border: @arguments;
}
.xx-test(@type;@rest...){
　　height: @type * 12px;
　　border: @rest;
}
.myClass {
    .xx-border (100px, solid, pink);
    .xx-test(2;1px;solid;red);    
}

//mixin函数的形势参数可以使用逗号和分号隔开，个人习惯问题，无所谓！
.xx-test (@width: 1px, @type, @color: red) {
    border: @arguments;
}
.myClass {
    .xx-test (@type: solid);
}

//mixin的重载可定义多个同名mixin，调用时只要参数数量匹配则会执行相应的mixin。
.base (@font-size) {
    font-size: @font-size;
}
.base (@font-weight, @color) {
    font-weight: @font-weight;
    color: @color;
}
.base (@border...) {
    border: @arguments;
}
.test-Class {
    .base(20px);
    .base(bold, black);
    .base (1px, solid, red);
}

//mixin支持标签参数的模式匹配
.common (aaa; @type; @color) {
    border: 1px @type; @color;
}
.common (bbb; @type; @color) {
    border: 1px solid blue;
}
.common (@type; @color) {
    border: 1px @type; @color;
}
.myClass {
    .common (aaa, solid, red);
    .common (bbb, solid, blue);
    .common (solid, green);
    .common (bbb, solid);   //这里虽然使用了标签，但参数不够，会把标签当成是一个值
}

//less函数命名空间
.nameSpace {
    .package {
        .a () {
            a: a;
        }
        .b () {
            b: b;
        }
    }
}
.myClass {
    .nameSpace.package.a();
    .nameSpace.package.b();
}

//作为结构体内部的变量是不会被外部访问到的，先拆包，调用就有反应
//规则体变量访问不到会报错 start
@color: blue;
@struct : {
    font-size: 20px; 
    @color: #f00;
    & > .book {
        margin: 10px;
    }
    .name () {
        border: 1px solid red;
        color: @color;
    }    
};
.myClass {
    //如果使用了规则体，内部的子函数只能够通过拆包的方式拿到，不能使用命名空间的方式去拿
    //使用的@color是距离less子函数就接近的那个颜色值
    @struct();
    .name();  
    @color: green;  // 作为结构体内部的变量是不会被外部访问到的
}

// = ---> javascript的==，不是赋值，逗号表示或的意思
//default函数用于条件控制当中，充当else或switch语句中default的角色。
//.func (@size) when (@size > 20pt) and (@size < 40pt) , (true) {
.func (@size) when (@size > 20pt) and (@size < 40pt) {
    .red when (@size = 30pt) {
        font-size: @size;
        color: #f00;
    }
    .blue {
        font-size: @size;
        color: blue;
    }
}
//加了when (default())之后这个函数需要前者条件不符合的情况下才会执行 
.func (@size) when (default()) {
    .yellow {
        font-size: @size;
    }
}
.selector {
    .func (35pt);
}

//mixin函数的递归不能够对选择器做递归循环，只有使用到了的变量才会发生变化，执行循环多次
.generate-columns(@n, @i: 1) when (@i =< @n) {
　.column-@{i} {
　　　width: (@i * 100% / @n);
　}
   .generate-columns(@n, (@i + 1));
}
.generate-columns(4);