1.less
2.响应式
less
Css预处理器：less、scss、stylus
1新建一个less文件(后缀名就是.less)
2会按照less的语法要求在less文件中编写代码
3 通过easy less vscode 插件来编译less文件
4会生成对应的css文件
5在网页中直接引入编译好的css文件即可
作用：
提高我们编写Css效率的工具（浏览器不能直接识别它，依靠编译工具将它编译成Css文件）
语法：
1变量 方便快速去修改 样式 2 运算 less 支持 数学运算 3 混合 mixin ：把一大段css代码 都堆在一起 方便使用 4 嵌套 让我们按照html的嵌套结构 来编写css嵌套 5 如何指定 编译好的css文件存放在哪里 这个知识上课不讲，不重要!! 使用easy less 指定生成的css目录位置，这个技术以后工作中用不到2 后期会有其他的编译工具统一处理css的生成目录常用
1、变量
①定义变量
②使用变量
@color:#faa;
div{
// 使用变量
color: @color;
border: 1px solid @color;
}
p{
color: @color;
background-color: @color;
}
a{
color: @color;
}
span{
color: @color;
}
// 页面有一种主题色(天猫。京东 红色。美团黄色。饿了吗蓝色) 当我们要修改主题颜色的时候，只改一个地方即可
// 懂得了使用less 变量技术 就可以做到改一个地方即可
// 变量会变化的 数据即可
// 固定语法 @+任意的名称(有语义的英文)
//变量:作用把一些css的属性设置在一个地方，实现一改全改
@theme-color:gray;
/*统一设置网页字体的大小 */
@font-size:50px;
div{
color: @theme-color;
font-size: @font-size;
}
p{
color: red;
font-size: @font-size;
}
section{
background-color: @theme-color;
font-size: @font-size;
}
2、运算（加减乘除）
①默认的css 不支持运算，使用calc 就可以了
②less支持运算
③ 加、减、乘直接书写计算表达式 、除法需要添加 小括号 或 .
④注意： 表达式存在多个单位以第一个单位为准
// 定义变量
@fontsize: 20px;
div{
width: 100px + 200;
width: 300px - 100px;
height: 100px * 3;
/* 使用easy less 编译除法需要加上 括号 */
height: (300px / 3);
height: 400px ./2;
/* div字体大小是 变量的2倍 */
font-size: @fontsize * 2;
}
3、混合 mixin
// 需求 有三个 元素 想要使用 一张精灵图
// 1 A元素 图片位置 x y (-300px ,30px)
// 1 B元素 图片位置 x y (-200px , 30px)
// 1 C元素 图片位置 x y (-100px ,60px)
// 使用 less的mixin来解决 (用法有点类似变量)
// 定义一个mixin
// 存放你想要用到一坨代码
.aaaa(@a1,@a2){
background-image: url();
background-size: 100%;
background-repeat: no-repeat;
// 背景图片的位置
background-position: @a1 @a2;
}
div{
.aaaa(-300px , 30px);
// background-position: -300px , 30px;
}
p{
.aaaa(-200px , 30px);
// background-position: -200px,30px;
}
a{
.aaaa(-100px , 60px);
// background-position: -100px,60px;
}
4、嵌套
注意：伪元素正确写法 要加上一个 & 连接
.box{
p{
color: #baf;
}
> section{
#header{
button{
color: #faa;
}
}
}
a{
img{width: 100px;
}
}
}
div{
height: 100px;
background-color: #bfa;
// 伪元素正确写法 要加上一个 & 连接
&::before{
content: "less实现的伪元素";
}
}
响应式
作用
1、什么是响应式网站：一套代码可以实现pc端和移动端的布局，而且体验不错
2、实现原理：媒体查询
3、媒体查询：技术，可以做到根据屏幕的宽度或者高度不同，去使用对应的css代码
