less起步01------基本语法

最新推荐文章于 2019-06-04 09:50:32 发布

燃情雪

最新推荐文章于 2019-06-04 09:50:32 发布

阅读量157

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/h1234561234561/article/details/89403617

版权

css 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

前提补充：
01，考拉官网：http://koala-app.com/index-zh.html
02，less中文网：http://lesscss.cn/
03，bootstrap中less学习网：http://www.bootcss.com/p/lesscss/

问题一：什么是less？
less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin，函数等特性，使CSS更加易于维护和扩展less既可以在客户端运行，也可以借助Node.js在服务器上运行
问题二：less的注释有那几种？
以//开头的注释，不会被编译到CSS文件中【因为转编译逻辑毕竟是用js编写的】
以/**/包裹的注释会被编译到CSS文件中
问题三：less中的变量怎末申明？
使用@来申明一个变量【和数据库sql语句相似】，如@color:deeppink;
注意
01,作为普通属性值只来使用：直接使用@color
02,作为选择器和属性名：#@{selector的值}的形式
03,作为URL：@{url}
04,变量的延迟加载【在less中，变量是块级的，如果在一个块级中，连续多次对一个变量赋值，则变量值为最后一次赋值，因为less是先加载整个块级所有的变量，然后再进行转编译】
demo

@color:black;
@attr:margin;
@selector:#wrap;

@{selector}{
	width: 300px;
	height: 300px;
	@{attr}:20px auto;
	background: @color;
	//重新再次给@color赋值
	//因为变得延迟加载，所以虽然在background: @color;依然对其生效
	@color:pink;
}

问题四，less中的嵌套规则有哪几种？
01，基本嵌套规则
02，&的使用
注意
&消除空格，避免所编译出的CSS不生效，一般作用于对伪类的使用
demo

* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
#wrap{
	margin: 100px auto;
	width: 300px;
	height: 300px;
	border: 2px solid @color;
	@color: pink;
	div{
		width: 100px;
		height: 100px;
		background: @color;
		&:hover{
			background: black;
		}
	}
}

问题五：less中的混合的混合方式种类？
01，普通混合
02，不带输出混合【函数不带参数】
03，带参数的混合
04，带参数并且有默认值的混合
05，命名参数
06，arguments变量
07，匹配模式
08，在一个name1.less中引用另外一个name2.less
注意
01，普通混合，less.js会把其当作类，从而编译到CSS中。
02，匹配模式下，如果混合模式是带参数但是不带有有默认值的混合。
语法为：.name(标识符, arg1, arg2...);
demo

//mixture.less文件
//普通混合
.mixture_1{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
//不带输出混合
.mixture_2(){
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
//带参数混合
.W_or_H_1(@width, @height){
	width: @width;
	height: @height;
}
//带参数并且有默认值的混合
.W_or_H_2(@width:100px, @height){
	width: @width;
	height: @height;
}
//arguments变量[所有实参集]
.border(@w, @style, @color){
	border: @arguments;
}
//引入另外一个less文件
@import "./mixture_match.less";
#wrap{
	.mixture_1;
	.W_or_H_1(300px, 300px);
	.border(2px, solid, red);
	div{
		.mixture_2();
		//命名参数
		.W_or_H_2(@height:100px);
		//匹配模式
		.background(G);
	}
}

//mixture_match.less文件
//匹配模式
.background(B, @color:black){
	background: @color;
}
.background(P, @color:pink){
	background: @color;
}
.background(G, @color:green){
	background: @color;
}

问题六，less中的继承怎末写？
语法： selector:extend(.name){}
注意点
01，不支持参数【性能比混合高，灵活比混合低】
02，一般用于表达多列选择器
03，所有子代都会继承父代所继承的style声明块
04，由于继承不能传参，所以一般是将所需继承的写在另外一less文件中，避免在CSS中额外编译出.name{style;}
demo

  //extend.less文件
@import "./extend_direction.less";
#wrap{
	.extend;
	width: 300px;
	height: 300px;
	border: 2px solid red;
	div:extend(.extend){
		&:nth-child(1){
			width: 200px;
			height: 200px;
			background: red;
		}
		&:nth-child(2){
			width: 100px;
			height: 100px;
			background: pink;
		}
	}
}

  //extend_direction.less文件
.extend{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

部分结果

.extend,
#wrap div,
#wrap div:nth-child(1),
#wrap div:nth-child(2) {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
//因为其div所继承模式为花括号外面，所以就会产生多余的#wrap div:nth-child(1),
#wrap div:nth-child(2)

修改方法
将:extend(.extend)写入括号里面，注意清除空格；改后为div{&:extend(.extend);...}
结果

.extend,
#wrap div {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

问题七，less中的避免编译和计算？
避免编译：~“String” 如：padding: ~"calc(10 + 10px)";
计算：value1 + value2单位如：margin: 10 + 10px;
注意点
01，避免编译是将某些浏览器可以自行处理的运算，数据等，交给浏览器处理，而不需要less.js处理，提高了性能。【less.js将~"value"中的value作为字符串不做处理】
02，less.js计算只需要一个单位即可。