2024年Web前端最全Less使用教程和步骤_less的使用(1)，写给程序员的Flutter详细教程

最新推荐文章于 2024-09-08 17:38:22 发布

2401_84446787

最新推荐文章于 2024-09-08 17:38:22 发布

阅读量979

点赞数 11

分类专栏：程序员文章标签：前端 less flutter

本文链接：https://blog.csdn.net/2401_84446787/article/details/138450829

版权

程序员专栏收录该内容

158 篇文章 0 订阅

订阅专栏

本文是关于Less预处理语言的全面教程，包括介绍、创建与转换工具、使用方法、变量和嵌套规则。同时提及了Flutter前端开发的相关内容，强调理解并运用技术的重要性，提供大厂前端面试题解析和学习资源。

摘要由CSDN通过智能技术生成

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

大厂面试题

面试题目录

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();
            }