less的使用-基本语法-编译

less的使用

1. 使用less预处理器(引入和编译)

1. 引入less文件 <link rel="stylesheet/less" href="index.less"> (需要定义文件格式rel="stylesheet/less")

2. 引入less编译器文件 <script src="lib/less/less.js"></script> 用来动态加载less文件并创建style标签把CSS放到style标签里面

2. less基本语法

注释

// 会被删除
/**/ 不会被删除

1. 变量 详细用法

1. 变量为属性值

定义变量: @变量名:变量值
使用变量: 属性:@变量名

    // 变量
    @main-color: #333;

    // 用法
    body {
        background-color:@main-color;
    }

2. 变量为属性或者为选择器

定义变量: @变量名:变量值
使用变量: @{变量名} :属性值

    // 变量
    @property: color; //属性

    // 用法
    body {
        background-@{property}:#333;
    }

    // 变量
    @mySelector: banner; //选择

    // 用法
    @{mySelector} {
        background-color:#333;
    }

3. 变量为变量名

定义变量: @变量名:"变量值"
使用变量: 属性:@@变量名

    @var:"hi"; //变量名
    @hi:"hello world" //变量

    // 用法
    body {
        content: @@var;
    }

4. 变量为地址

定义变量: @变量名:"变量值"
使用变量: 属性:@@变量名

    // 变量
    @images: "../img";

    // 用法
    body {
         background: url("@{images}/white-sand.png");
    }

5. 导入语句

可以导入其他的less文件

    // 变量
    @themes: "文件路径";

    // 用法
    @import "@{themes}";

2. Mixin(类似函数) 详细用法

定义函数: .函数名{}或.函数名(@参数名:默认值){} 后面这种形式只创建不会输出,参数可以是多个
调用函数: 函数名或函数名(参数值) 调用mixin时，括号是可选的

    .my-mixin {
        color: black;
    }
    .my-other-mixin(@color:white) {
        background: @color;
    }
    .border-radius(@radius) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        border-radius: @radius;
    }
    .class {
        .my-mixin;
        .my-other-mixin(#333);
        .border-radius(50%);
    }

3. 嵌套的使用

    /* css写法 */
    .container .row div{
        /* *** */
    }

    /* less写法 */
    .container{  
        .row{
            div{
                /* *** */
            }
        }
    }

4. less语法的&的使用 详细使用

& 运算符表示嵌套规则的父选择器,在修改类或伪类时常用;

1. 交集选择器

    /*css语法*/
    li.active{
        color:#666;
    }

    /* less语法 */
    li{
        &.active{
            color:#666;
        }
    }

1. 伪类

    /* css语法 */
    a:hover{
        color:#ccc;
    }

    /* less语法 */
    a{
        &:hover{
        color:#ccc;
        }
    }

1. 伪元素

    /* css语法 */
    div::before{
        content:"";
    }

    /* less语法 */
    div{
        &::before{
            content:"";
        }
    }

1. 兄弟选择器

    div{
        &+div{
            /* *** */           
        }
        &~div{  
            /* *** */
        }
    }

3. less命令行用法

使用命令行将.less文件编译成.css文件

1. 安装lessc

使用npm安装lessc

npm install less -g

使用命令行

在less所在目录打开CMD执行命令lessc less文件名.less css文件名.css

lessc index.less index.css

lessc index.less ../css/index.css