html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<title>Document</title>
</head>
<body>
<!--
css的常见预处理语言：less sass stylus
它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
less的语法向下兼容，可以兼容所有css的语法
优雅降级 高版本兼容低版本
渐进增强 低版本向上兼容
1.指定css的字符集 @charset "utf-8";
2.less中的//注释编译后不会在css中显示 /**/此注释会显示在css中
3.定义变量 @变量名:值; 一般为大量重复使用的值定义为变量 @width:1200px;
使用时 width:@width;
4.变量定义属性 定义属性时，使用时必须加上{} 用法为@{bg} @bg:background;
使用时 @{bg}:red;
5.变量定义选择符 (不建议使用)
@header:div.wrap>div.header;
6.Mixins 混入 相当于定义函数 .名称(参数,参数,参数){设置值}
.border(){
border:1px solid red;
}
@p @c1 @c2为定义的参数
.linear(@p,@c1,@c2){
background:-webkit-linear-gradient(@p,@c1,@c2);
background:-moz-linear-gradient(@p,@c1,@c2);
background:-o-linear-gradient(@p,@c1,@c2);
background:-ms-linear-gradient(@p,@c1,@c2);
}
使用时 div{
.linear(top,red,green)
}
7.用混入函数时 括号传递的参数可以传递默认值,也可以传递自己设置的值
.border(@width:2px){
border:@width solid red;
}
8.设置hover属性效果 用&符号代表当前所在的元素的父级
ul{
width:100px;
height:100px;
background-color:red;
这个就相当于给ul添加hover效果
&:hover{
width:200px;
height:200px;
}
}
9.导入url.less @import "url.less";
10.继承 .two会继承.one的所有样式,并且有自己的background:blue属性
.one{
width:300px;
height:300px;
}
.two{
&:extend(.one);
background:blue;
}
11. less支持计算属性
变量名可以重复，当局部变量和全局变量冲突时，优先使用局部变量
12.特殊的样式
border-radius:~'20px/20px';斜线代表除法,用~''包裹就代表了是设置样式而不是除法
background:url('@{path}1.jpg') no-repeat 0px 0px;在路径里面也可以引入变量,直接使用代表路径
-->
<!-- <div class="one"></div>
<div class="two"></div> -->
<div class="wrapper">
<div class="top">
<div class="nav"></div>
<div class="title"></div>
</div>
<div class="middle">
<ul class="content">
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
<div class="bottom">
<!-- <p>我是p1</p>
<p>我是p2</p>
<p>我是p3</p> -->
</div>
<div class="foot"></div>
</div>
</body>
</html>
less:
@charset "utf-8";
*{
margin: 0;
padding: 0;
}
@width:1200px;//定义变量
@bg:background;//定义属性
.border(@w:5px,@sty,@col){
border: @w,@sty,@col;
}
.wrapper{
width: @width;
@{bg}:#abcdef;
.border(1px, solid, red);
.top{
width: 500px;
height: 500px;
background-color: aquamarine;
// border-radius: ~'250px/250px';
// &:hover{
// background-color: beige;
// }
.nav{
width: 100px;
height: 100px;
background-color: red;
}
.title{
// 要继承的话,需要从父级一层一层向下写
&:extend(.wrapper .top .nav);
background-color: yellow;
}
}
.middle{
&:extend(.nav);
}
.bottom{
width: 300px;
height: 300px;
background-color: chartreuse;
}
.foot{
&:extend(.wrapper .bottom);
}
}