Less使用教程和步骤

冷不防 2022-10-11 10:56 133阅读 0赞

# 1. less #

##        1. 介绍： ##

**less是css的预处理语言**，可以使用变量、函数、表达式等动态语言功能。其他常用的css预处理语言 sass stylus

##     2. 创建less文件 ##

.less文件结尾的文件 写css样式  
        less文件不能直接被浏览器识别，使用前需要把less转成css文件

##     3. 常用的把less转成css工具 ##

1.命令行工具  
            1. lessc命令工具  
                需要全局安装：**npm i less -g **  
                可以在命令中执行命令行功能语句

lessc xxx.less 
        lessc xx.less xx.css

2. gulp  
            3. webpack

2. 软件  
            考拉 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%);
            }