Less 基础入门

Less 基础入门

---

1. Less简介：Less是一种动态样式语言，也就是是一门 CSS 预处理语言，它扩展了 CSS语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
2. 开发环境搭建：使用koala进行即时编译，得同时创建Less文件和CSS文件，在Less里面进行编译，通过Koala同步到CSS文件里面，对样式起作用的依然是CSS文件。
   
   • 注意：1）使用koala不能反向编译，也就是说直接去CSS文件里面做修改的话不能同步到Less文件中；2）如果在CSS文件里面删掉某个样式，要恢复的话必须重新在Less文件里面删掉原本那个样式再重新输入才行，只进行简单的保存是不能恢复的。
3. Less有两种注释，一种是双斜杠加双星，另一种是直接双斜杠；前者可以被编译到CSS中，后者则不会编译到CSS中，也就是不会再CSS中显示
4. 变量：使用标志符 @ 定义一个变量

{   /*实例*/
    @box_size:400px;
    @box_color:#333;
}

1. 混合-（Mixin）：就是在一个样式中引用其他样式

{
   #less-box {
        width: @box_size;
        height: @box_size;
        background-color: @box_color;
        .border; // 直接在一个css样式里面添加那个类，而不必在div里面再重新添加一个类
        .border-text(green); // 不带默认值的参数调用的时候必须传入参数，否则会报错
        .border-text-define(); // 有默认值的可以不传参数而且不会报错，不传参数的话使用的是默认值
    }

    // css混合
    .border {
        border: 10px solid red;
    }
    // 混合 - 带参数
    .border-text(@border_color) {
        border:10px solid @border_color;
    } 
}

1. 匹配：在参数列表中添加一个匹配字符，放在列表的开头

{
    /*实例*/
    // 创建一个匹配字符“bottom”,在后面的引用中只要输入相应的字符即可匹配到对应的样式
    .triangle (bottom,@border_color:red, @border_size:40px) {
        border: @border_size;
        border-color: red transparent transparent transparent;
        border-style: dashed dashed solid dashed;
    }
    .triangle (@_,@border_color:red, @border_size:40px) { // 每个匹配模式都会带这个'@_' 属性，也就是都会有这个共同的类
        width: 0px;
        height: 0px;
        overflow: hidden;
    }
    .triangle-test {
        .triangle(bottom,yellow,20px); // 匹配“bottom”样式
    }
}

1. 运算：Less中所有的数字，颜色或者变量都可以参与到运算当中（+、-、*、/）；
2. 嵌套：注意嵌套和混合的区别，嵌套是样式的父子关系，而混合则是引用关系，可能同级引用，也可能不同级引用。

{
    /**
        嵌套：替换传统的堆叠式层级嵌套
    */
    // 传统CSS的嵌套
    .list-box ul {
    }
    .list-box ul li {
    }
    .list-box ul li a {
    }
    a:hover {
    }
    // Less嵌套
    .list-box {
        margin: 20px auto;
        width: 500px;
        list-style: none;
        ul {        // 嵌套
        };
        li {
            list-style: none;
            height: 30px;
            line-height: 30px;
            background-color: pink;
            margin-bottom: 5px;
            padding: 0 10px;
            a {
                // 这样的话就相当于：.list-box li a
            }
        }
        a { // a标签可以嵌套在.list-box下面，也可以嵌在li里面
            // 这样的话相当于： .list-box a; 这种情况效率明显比上面的要高
            float: left;
            text-decoration: none;
            &:hover {
                color: red;
            };
        };
        span {
            float: right;
        }
    }
}

1. 避免编译：有时我们不需要Less对我们的代码进行编译或者计算，则需要避免编译。

{
   .test-translate {
        // 如果直接这样写的话less会帮你计算出括号里面的结果，但calc方法是给浏览器计算的，因此不需要在less里面计算结果
        width: calc(300px - 270px);
        // 避免编译:在前面加一个~，再加单引号或双引号就行，这样就可以按照calc(300px - 270px)格式显示在css里面
        width: ~'calc(300px - 270px)';
    } 
}