目录
less
简介
less是一门css的预处理，是一个css的增强版，通过less可以写更少的代码实现更强大的样式
在less中添加了许多的新特性，eg对变量的支持，对mixin的支持
less的语法大体上和css语法一致，但less中增添了许多对css的扩展
所以浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
html{
--color:#ff0 ;
--length:200px;
}
.box1{
width: calc(200px/2);
height: var(--length);
background-color: var(--color);
}
.box2{
width: 200px;
height: 200px;
color: var(--color);
}
.box3{
width: var(--length);
height: var(--length);
border: 10px solid var(--color);
}
</style>
</head>
<body>
<div class="box1">aaaa</div>
<div class="box2">aaaa</div>
<div class="box3">aaaa</div>
</body>
</html>
效果：
变量
在变量中可以存储一个任意的值，并且在我们可以在需要是，可以任意修改变量的值
语法：@变量名
示例：
syntax.less
@a:100px;
@b:red;
@c:box6;
.box5{
width: @a;
height: @a;
color: @b;
}
.@{c}{
width: 6.25rem;
background-image: url(../../06_font&background/fa/webfonts/fa-brands-400.svg);
}
div{
width: 100px;
height: 100px;
}效果：
syntax.css
/*
多行注释
内容会被解析到css文件中
*/
.box1 {
background-color: #BBFFAA;
}
.box1 .box2 {
background-color: #ff0;
}
.box1 .box2 .box4 {
color: red;
}
.box1 .box2 .box3 {
background-color: orange;
}
.box5 {
width: 100px;
height: 100px;
color: red;
}
.box6 {
width: 6.25rem;
background-image: url(../../06_font&background/fa/webfonts/fa-brands-400.svg);
}
div {
width: 100px;
height: 100px;
}
父元素
&表示外层的父元素
示例：
style3.less
.box1{
.box2{
color: red;
}
>.box3{
color: green;
&:hover{
color: blue;
}
}
&:hover{
color: orange;
}
}效果：
style3.css
.box1 .box2 {
color: red;
}
.box1 > .box3 {
color: green;
}
.box1 > .box3:hover {
color: blue;
}
.box1:hover {
color: orange;
}
扩展
:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
示例：
.p1{
width: 100px;
height: 100px;
}
//:extend() 对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
color: red;
}效果：
css
.p1,
.p2 {
width: 100px;
height: 100px;
}
.p2 {
color: red;
}
直接对指定样式进行引用，这里就相当于将p1的样式在此进行了复制
mixin 混合
示例：
p3{
.p1();
}效果：
.p3 {
width: 100px;
height: 100px;
}类选择器
使用类选择器时可以在选择器后边添加一个括号，此时就需要用一个mixins
示例：
.p4(){
width: 100px;
height: 100px;
background-color: #BBFFAA;
}
.p5{
.p4();
}
效果：
.p5 {
width: 100px;
height: 100px;
background-color: #BBFFAA;
}
注意：在less中所有的数值可以直接运算
示例：
@import"syntax2.less"
.box1{
width: 100px;
height: 100px/2;
background-color: #BBFFAA;
}效果：
css
@import "syntax2.less".box1 {
width: 100px;
height: 50px;
background-color: #BBFFAA;
}
flex（弹性盒、压缩盒)
主要用来代替浮动来完成页面的布局，通过使元素具有弹性，让元素跟随页面的大小的改变而改变
弹性容器
通过dislay来设置弹性容器
可选值：
- display:flex 块级弹性容器
- display:inline-flex 行内的弹性容器
弹性元素
弹性容器的子元素是弹性元素（弹性项）
flex-direction
指定容器中弹性元素的排列方式
可选值：
| row | 默认值，弹性元素在容器中水平排列（左向右） 主轴，自左向右 |
| row-reverse | 弹性元素在容器中反向排列（右向左） |
| column | 弹性元素纵向排列（自上向下） |
| column-reverse | 弹性元素纵向排列（自下向上） |
主轴：弹性元素的排列方向
侧轴：与主轴垂直的方向
弹性元素的属性
flex-grow
指定弹性元素的伸展的系数，当父元素有多余空间时，子元素如何伸展
父元素的剩余空间会按照比例进行分配
flex-shrink
指定弹性元素的收缩系数
当父元素中的空间不足以容纳所有子元素时，会对子元素进行收缩
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 500px;
border: 10px red solid;
display: flex;
flex-direction: row;
display: flex;
}
li{
width: 200px;
height: 100px;
background-color: #BBFFAA;
font-size: 50px;
text-align: center;
line-height: 100px;
}
li:nth-child(1){
flex-grow: 1;
}
li:nth-child(2){
background-color: pink;
flex-grow: 2;
}
li:nth-child(3){
background-color: orange;
flex-grow: 3;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
效果：
