HTML 的less写法
一、less简介
1、less是一门css的预处理语言
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
less的中文官网：http://lesscss.cn/
1.1、 Css短板
css作为一门标记性语言，给初学者的第一印象是简单易懂，毫无逻辑，不像编程该有的样子。
问题的诞生伴随着技术的兴起，在web发展的这几年，出现了预处理语言，
让css彻底变成了一门可以使用变量、循环、继承、自定义方法等多种特性的标记语言，
1.2、预处理语言的诞生
（1）:sass诞生于2007年，Ruby编写，语言功能十分全面，国内外都很受欢迎，它的项目团队也很强大，是一款十分优秀的预处理语言
（2）： stylus诞生于2010年，来自Node.js社区，语法功能和sass不相伯仲
（3）:Less诞生于2009年，受Sass影响的一个开源项目，增加了变量，混合，函数等功能，让css更易维护，方便制作主体，扩充
2、安装使用less
HBuilderX 安装插件 利用HBuilderX新建less文件并配置less插件实现自动编译生产css文件_hbuilder怎么用less实现同心圆案例并编成css-CSDN博客
这种编译方式不好，编译页面时，将less转成css，会影响，网站的性能
<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>
3、注释
// 写法一：这是less的注释，css看不见,不会被编译到css文件中
/* 写法二： 这是css的注释，css文件可以看到，会被编译到css文件中*/
*{
margin: 0;
padding: 0;
}二、变量
1、普通变量
// 定义变量1
@color:red;
@width:300px;
@height:300px;
#wrap{
width:@width;
height: @height;
border: 1px solid;
background-color: @color;
margin: 0 auto;
}2、变量作为选择器或者属性名
// 声明selector对应#wrap
@selector:#wrap;
@w:width;
@h:height;
@{selector}{//使用时变量名必须使用大括号包裹
@{w}:@width;
@{h}: @height;
border: 10px double black;
background-color:@color ;
margin: 0 auto;
}3、变量作为url
@url:"../img/img1.png";//定义图片引入路径
@selector:wrap;
@color:red;
.@{selector}{
width: 200px;
height: 200px;
background-color:@color;
background: url(@url) no-repeat;
background-size: cover;
}4、变量延迟加载
@var: 0px;
// 变量是块级作用域，一个括号代表一个作用域
.class {//一个作用域
@var: 10px;
.brass {//一个作用域
@var: 20px;
width: @var; // width: 30px; 读完块级作用域后，再去确定变量值
@var: 30px;
}
width: @var; //width：10px；
}三、嵌套规则
1.基本嵌套规则
2.&的使用
ul{
width: 400px;
li{
width: 25%;
a{
color: white;
}
// &表示上一级选择器
&:hover{
background-color:tomato;
}
}
}四、混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式(ctrl c +ctrl v)
1.普通混合 （会编译到原生css中）
// 定义的base普通混合，less编译为css文件后，会在css中显示
.base{
width: 100px;
height: 100px;
margin-bottom: 10px
}
#box1{
.base;
background: pink;
}
#box2{
.base;
background: deeppink;
}2.不带输出的混合
// 语法：.base() 不会在css中输出混合
.base(){
width: 100px;
height: 100px;
margin-bottom: 10px
}
#box1{
.base;
background: pink;
}
#box2{
.base;
background: deeppink;
}3.带参数的混合
//带参数的混合
// 行参
.base(@w,@h,@color){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
// 以下传入实参
#box1{
.base(100px,100px,red);
}
#box2{
.base(200px,200px,pink);
}4.带参数并且有默认值的混合
//带参数的混合
// 行参
.base(@w:100px,@h:100px,@color:yellow){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
// 以下传入实参，参数是一一对应的，不能不写
#box1{
.base(100px,100px);
}
#box2{
.base(200px,200px,pink);
}
#box3{
.base;
}5.命名混合
.base(@w:100px,@h:100px,@color:yellow){
width: @w;
height: @h;
background-color: @color;
margin-bottom: 10px
}
//写了命名混合的，就对应哪个变量，剩余的再对应
#box1{
.base(@w:200px,@color:red);
}
#box2{
.base(@w:200px,150px,red);
}
#box3{
.base;
}6.匹配模式
可以定义一个混合库minx.less，在实际写less的时候，然后引入混合库
//定义混合库
// @_ 每次调用arrows的时候，都调用它
.arrows(@_,@w,@C){
width: 0;
height: 0;
border-width:@w;
border-style:solid;
}
// 参数一：匹配的名字
.arrows(Top,@w,@C){
border-color: @C transparent transparent transparent;
}
.arrows(Right,@w,@C){
border-color: transparent transparent transparent @C;
}
.arrows(Bottom,@w,@C){
border-color: transparent transparent @C transparent;
}
.arrows(Left,@w,@C){
border-color: transparent @C transparent transparent;
}
// 引入minx库，两种方式都可以
// @import url(./minx.less);
@import './minx.less';
#arrows{
.arrows(Right,@w:40px,@C:red)
}7.arguments变量
.border(@w,@style,@c){
border: @arguments;// 等价于 border: @w @style @c;
}
#wrap{
width: 200px;
height: 200px;
background: pink;
.border(10px,solid,red);
}五、运算
@w:100px;
*{
margin: 0;
padding: 0;
}
#wrap{
// 计算的双方，只要一方有单位就可以了
// + - *
width:@w+200;
height: 200px;
background: pink;
}六、避免编译
*{
margin: 0;
padding: 0;
}
#wrap{
//calc()是css3的一个新增的功能，用来指定元素的长度
// ～'' less不编译，原封不动，交给css编译
width:~"calc(200px + 700px)";//css中显示 width: calc(200px + 700px);
height: 100px;
background-color: red;
}七、继承
区别与混合，混合是复制粘贴，继承最后可以合并css代码，用并集选择器
//先定义公用的less库
.juzhongMix{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhongMix:hover{
background-color: red;
}
//然后使用继承，编写less
*{
margin: 0;
padding: 0;
}
@import url(./mixin.less);
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
#box1{
//1、 继承.juzhongMix样式，
&:extend(.juzhongMix);
width: 100px;
height: 100px;
background-color: pink;
}
#box2{
//2、 继承.juzhongMix所有相关的样式
&:extend(.juzhongMix all);
width: 50px;
height: 50px;
background-color: yellow;
}
}
//最终编译的css文件如下
* {
margin: 0;
padding: 0;
}
//重复部分用了并集选择器
.juzhongMix,
#wrap #box1,
#wrap #box2 {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.juzhongMix:hover,
#wrap #box2:hover {
background-color: red;
}
#wrap {
position: relative;
width: 300px;
height: 300px;
border: 1px solid red;
}
#wrap #box1 {
width: 100px;
height: 100px;
background-color: pink;
}
#wrap #box2 {
width: 50px;
height: 50px;
background-color: yellow;
}原文地址：https://blog.csdn.net/S_3440183297_/article/details/143780251
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！