js教程 less基本规则以及在vue中使用

詹甫

2023-12-01

less的基本概念

Less 是一门 CSS 预处理语言，为CSS赋予了动态语言的特征。它扩展了 CSS 语言，增加了变量、Mixin(混合)、嵌套、函数和运算等特性，使 CSS 更易维护和扩展。

vue中使用less

第一步: npm install less-loader less -D
第二步: 在vue文件中的< style>上写上 < style type=“text/less” lang=“less”>

在VUE-CLI脚手架建立的工程中，在vue文件中的< style type='text/less' lang='less'>< /style>中如果编写less代码，如果开启了eslint会造成很大的困扰。可以使用如下方式：

#test.vue文件中
<style scoped lang='less' type='text/less'>
	@import './test.less'
</style>

#test.less文件中
可以编写less代码，且能被webstrom和eslint识别。

less的注释

// less中的行注释，不会被编译到css文件中。
/* */ less中的块注释，会被编译到css文件中。

less的嵌套规则与&

less对于串行选择器的嵌套规则

后台选择器嵌套

	.one {
		background-color : red;
		.two {
			height: 30px;
			widtgh: 30px;
		}
	}

儿子选择器嵌套

	.one {
		background-color : red;
		> .two {
				height: 300px;
				width:  300px;
		}
	}

相邻兄弟选择器

.one {
	+ div {
		height: 300px;
		width:  300px;
		border: 1px solid #ddd;
	}	
}

兄弟选择器

.one {
	~ div {
		height: 300px;
		width:  300px;
		border: 1px solid #ddd;
	}
}

表示外部串行选择器的&标识符

串行的选择器，都可以用嵌套规则完成。但是有一种特殊情况：当对元素的伪元素进行处理的时候，需要在嵌套内部调用外部串行的选择器。这是时候&符号能完成此工作。

.one {
	.two:hover {
		#此时的.three的选择器为: (.one .two:hover .three)
		.three {
		}		
	}
	
	.four: {
		#此时的选择器为 ( .one .four:hover )
		&:hover {
		}
		#此时的选择器为 ( .one .four .five )
		.five {
		}
	}
}

less中的变量与运算

less中的变量

less允许使用@符号来声明一个变量。比如

@pink : pink
@backgroundColor : '#ff0000'

声明变量 ==> 作为属性值使用：

@backgroundColor : red
div {
	background-color: @backgroundColor;
}

声明变量 ==> 作为属性名使用：

#当做属性名使用的方式，eslint编译不过去。另外这种方式也不推荐使用。
@backgroundColor : background-color;
div {
	@{backgroundColor} : '#ff0000';
	width: 300px;
	heigght: 300px;
}

声明变量 ==> 作为选择器使用：

#当做选择器名字使用的方式，eslint编译不过去。另外这种方式也不推荐使用。
@wrap : div;
@{wrap} {
	@{backgroundColor} : '#ff0000';
	width: 300px;
	heigght: 300px;
}

声明变量 ==> 作为URL使用：

  @urlaaa : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580205981432&di=230ef3c27a57c125dc2b618bc7e76547&imgtype=0&src=http%3A%2F%2F00.minipic.eastday.com%2F20170426%2F20170426145543_d286b1d11013bff1d01c48c2a30b9586_10.jpeg";
  @backgroundColor : red;
  .two {
      width: 200px;
      height: 200px;
      background: url(@urlaaa)
  }

关于less变量的延迟加载：

#div实际显示得颜色#00ff00; 
@backgroundColor : #ff0000;
div {
    background-color : @backgroundColor;
    width: 300px;
    height: 200px;
    @backgroundColor : #00ff00;
}

less中的运算

less支持常量，变量的加减乘除。

@width: 300px;
@height: 200px;
.one {
  width: @width;
  height: @height;
  border: 1px solid #ddd;
}

.two {
   width: @width/2;
   height: @height/2;
   border: 1px solid red;
}

less中的混合

混合就是将一系列属性从一个规则集引入到另一个规则集合。

普通混合
普通混合，会导致混合定义的代码保持在css文件中，不推荐使用。

#定义普通混合
.background [
	  width:200px;
	  height:200px;
	  background-color:red;
}
#使用混合
#.one是选择器。在.one内使用混合(.bacnkground)
.one {
	  .background
}

不带参数的混合
在普通混合后增加一个括号，则混合的定义的代码不会被编译到css文件中。

  .background() {
       width:200px;
       height: 200px;
       background-color: blue;
  }
 .one {
      .background
  }

带参数的混合

  .background(@width, @height, @backgroundColor){
  	  width : @width;
  	  height :  300px;
  	  background-color: @backgroundColor;
  }
  .one {
  	  .background(300px,200px, yellow);
  }

带参数且有默认值的混合

  .background(@width:200px, @height:300px, @backgroundColor:red){
      width : @width;
      height :  300px;
      background-color: @backgroundColor;
  }
  .one {
      .background(300px);
  }

命名参数
命名参数针对于非第一个参数赋值，而前面的参数使用默认值的情形。

  .background(@width:200px, @height:300px, @backgroundColor:red){
    width : @width;
    height :  @height;
    background-color: @backgroundColor;
  }
	
  #@height: 100px 通过指定参数的名字，来进行对应的参数赋值。	
  .one {
    .background(@height:100px);
  }

匹配模式

  #第一个参数 @_ 表示匹配任意的标识符。	
  .angle( @_, @color ){
    border-width: 100px;
    border-style: solid;
  }
  #第一个参数是标志符，用于模式匹配。
  .angle( T, @color ) {
    border-color:  @color transparent transparent transparent ;
  }
  #第一个参数是标志符，用于模式匹配。
  .angle( R, @color ) {
    border-color:   transparent @color transparent transparent ;
  }
  #第一个参数是标志符，用于模式匹配。
  .angle( B, @color ) {
    border-color:  transparent transparent @color transparent ;
  }
  #第一个参数是标志符，用于模式匹配。
  .angle( L, @color ) {
    border-color:   transparent transparent transparent @color;
  }
	
  .one {
 	#第一个参数指定标识符，用于匹配多个同名的混合中的某一个。
 	#如果存在标识符为@_的模式，表示总会匹配这个模式，其他模式也能继续匹配。
    .angle(R, yellow );
  }

arguments变量

#@arguments表示接收到的所有参数。
.test(@1, @2, @3){
  border : @arguments;
}
.one {

   width:200px;
   height:200px;
   .test(1px, solid, red);
}

less继承

less使用:extend( xxx )方式来继承

.test {
	width : 200px;
	height : 200px;
}

div:extend( .test ){
	border: 1px solid #ddd
}

less使用:extend( xxx all )方式来继承xxx，以及xxx的伪类

.test {
	width: 200px;
	height: 200px;
}
.test:hover {
	border: 1px solid red;
}
div:extend( .test all ){
	border : 1px solid #ddd
}