前端基础之CSS技巧

前端基础工具(一) less 基本使用语法

    本文仅介绍less的基础语法,实际安装方法请参考[官方文档](http://lesscss.cn/)安装使用,如需帮助请联系博主?,话不多说进入正题.

1. 变量
    less通过@符号定义变量名称在less文件中可以多次调用,变量可作为选择器，例子如下:

        less输入:

        @nice-blue: #5B83AD;
        #header {
            color: @nice-blue;
        }

        css输出:

        #header {
            color: #5B83AD;
        }

2. 混合
    可以将class样式混合到另一个class中混合使用

        less输入：
            .a, #b {
                color: red;
            }
            .mixin-class {
              .a();
            }
            .mixin-id {
              #b();
            }
        css输出：

            .a, #b {
              color: red;
            }
            .mixin-class {
              color: red;
            }
            .mixin-id {
              color: red;
            }

3. 嵌套
    通过less的嵌套可以实现css的嵌套样式，同时&可以实现伪类的嵌套

        less输入：
            .b{
                color:red;
                a{
                    font-size:5px;
                    &:hover{
                        text-decoration:none;
                    }
                }
            }
        css输出：
            .b{
                color:red;
            }
            .b a{
                font-size:5px;
            }
            .b a:hover{
                text-decoration:none;
            }

4. 函数和计算
    函数可通过传参设置样式，函数中可以进行数学计算,同时less也有内置函数供使用者使用,常用包括字符串函数,列表函数,数学函数,类型函数,颜色操作函数,颜色混合函数

        less输入：
            .average(@x, @y) {
                @average: ((@x + @y) / 2);
            }
            div {
              .average(16px, 50px);
              padding: @average;
            }
        css输出：
            div {
              padding: 33px;
            }

5. 命名空间和作用域
    变量也可定义在标签内，有自己的作用域，在自己的作用域内生效，也可在其他标签作用域内生效。

            less输入：
            .demo {
                .demo_tab () {
                    width:100px;
                }
                .demo_citation () {
                    height:200px;
                }
            }
            div {
                .meng > .meng_tab;
            }
            h1 {
                .meng > .meng_citation;
            }

            css输出：
            div {
                width: 100px;
            }
            h1 {
                height: 200px;
            }

6. 其他

    * 公共样式以及变量可以通过@import引用到需要使用的less文件中使用。

    * JavaScript表达式也可在less中使用

        @var: `"hello".toUpperCase() + '!'`;
        // 输出
        @var: "HELLO!";