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) {
文末
从转行到现在,差不多两年的时间,虽不能和大佬相比,但也是学了很多东西。我个人在学习的过程中,习惯简单做做笔记,方便自己复习的时候能够快速理解,现在将自己的笔记分享出来,和大家共同学习。
个人将这段时间所学的知识,分为三个阶段:
第一阶段:HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
推荐学习方式:针对某个知识点,可以先简单过一下我的笔记,如果理解,那是最好,可以帮助快速解决问题;
-
大厂的面试难在,针对一个基础知识点,比如JS的事件循环机制,不会上来就问概念,而是换个角度,从题目入手,看你是否真正掌握。所以对于概念的理解真的很重要。