Less使用教程和步骤_less的使用

考拉 less

更新npm (npm install -g npm to update)

4. 使用less

1. 项目初始化： **npm init -y(**初始化保留默认配置)
        2. 安装项目依赖：npm i less -S
        3. 创建less文件 xx.less
        4. 编写less样式
        5. 把less文件生成css文件
        6. 把css引入到页面html中
        
        代码演示：xx.less

 @w:20px;.base(@bw:1px,@type:solid,@color:red){border:@bw @type @color;}.box{width: 10*@w;height: 4*@w;.base(3px);}

npm命令回顾
        安装命令：npm install modulename@1.1.1 --global --save --dev-save --force
            install 简写 i
            --global 简写 g  : 全局安装，一般是安装到c盘，一般的作用都是提供命令行中运行的命令
            --save  简写 -S  ：项目依赖，安装的是开发阶段和生产阶段都需要的模块
            --dev-save 简写 -D ：项目依赖，安装的是开发阶段使用的模块
            --force : 强制安装，替代旧版本
    
            modulename@1.1.1 ： 模块名称后的 @1.1.1 叫版本号
        卸载命令： npm uninstall modulename@1.1.1 
    
        npm scripts 命令：
            npm run scriptsName

5.  变量

1. 定义语法：@var:value;
        2. 使用变量：@var
            1. 作为普通的值使用
            2. 选择器变量
            3. 属性变量
            4. url 变量
            5. 声明变量

3. 变量的作用域
            和js中变量作用域一致
        
        代码演示：
            //1.定义变量  @变量:变量值;

//2.选择器变量

@box:#box;@class:.content;@{box}{//#box{border: 1px solid red;}.base()}@{class}{width: @w;}//3.属性变量@h:height;.wrapper{@{h}:@w*10;}//4. url变量@images:'./img/bg.jpg';.aa{width: 100*@w;height: 10*@w;background: url('@{images}');}//5. 声明变量@fontSize:{font-size: 20px;}.bb{@fontSize();}

6. 嵌套

1. 按照页面的层级结构来定义css
        2. & 能指代外层标签的作用    7. 混合
        1. 定义函数
            没有参数函数
            有参数的函数
            有默认值的函数
            数量不定的参数 base3(…){box-shadow:@arguments;}
            循环方法
                .generate-columns(@n, @i: 1) when (@i =< @n) {
                    .column-@{i} {
                        width: (@i * 100% / @n);
                    }
                }
        2. 使用函数
            没有参数的函数直接使用，可以不加小括号
            有参数的函数调用时需要传参
            代码演示：
            //函数

.generate(@n: 1, @w: 100px) when(@n<=10) {.item@{n} {width:@w - (@n - 1)*10;height: @w - (@n - 1)*10;border:2px solid #000000;position:absolute;top:@n*5 - 2px;left:@n*5 - 2px;box-sizing: border-box;}.generate(@n+1, 100px)}//循环函数.content {width: 100px;height: 100px;border: 2px solid #000;position: relative;.generate() }

8. 继承

1. extend 关键字来实现继承
        2. 全部继承 all        代码演示：

  //继承.box8{&:extend(.box .content all);color: red;}.box9:extend(.box ){margin: 20px;}

9. 导入

@import可以导入less文件
        @import ‘./xx.css’;

10. 内置函数

数学函数
        颜色函数

  .one{color: rgb(0,0,0);}.two{color: lighten(rgb(0, 0, 0),50%);}