个人录制的最新Vue项目学习视频：B站
小胖梅-的个人空间_哔哩哔哩_Bilibili
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%);
}
