less十大小知识

1. less为什么会出现
作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。

2.安装less环境

• 第一种， 第一种是找到：C盘/-----------Users-------MyPC（自己电脑名称）---------AppData（默认隐藏项目，需要自己在：菜单栏上的查看–把隐藏项目的选项打勾。）---------\Roaming-----------\npm（开始是空的）。把less解压后的文件全部复制到这个npm文件夹。
• 第二种方法：如下
  1、安装Nodejs环境 Node Package Manager (验证 node -v， npm -v) npm:node packge manager
  2、打开控制台（cmd），执行npm install -g less ，验证less是否安装成功 lessc -v
  成功后如图
  
  配置完成就是这个样子
• 命令行编译 lessc /xxx.less path/xxx.css
  先在编辑器新建一个xxx.less文件。
  打开cmd，进入到所建文件的路径，cd是进入盘的命令符；
  输入dir，可以看到该文件夹下的文件，
  输入 lessc xxx.less xxx.css
  最后生成一个css文件。
  

3、注释

在less中，注释符为“ // ”，与JavaScript等语言注释符相同。
在less中，如果注释符为“ /**/ ”（CSS注释符），则代表less文件编译成css文件后，在其css文件里显示的注释

4、变量

语法：@变量名:值;

必须@前缀，：是等于的以上，必须分号结束；
不能以数组开头，不能包含特殊字符，区分大小写

//变量用于字符拼接使用方法
.@{className}{  
	color: @mainColor;
}

5嵌套

less代码

.wjs_app{
	position: relative;
	img{
		display: none;
	}
	/*&空格*/
	:hover img{
		display: block;
		position: absolute;
		left: 50%;
	}
	> div{
		display: block;
	}
}

对应生成的css代码

.wjs_app {
  position: relative;
  /*&空格*/
}
.wjs_app img {
  display: none;
}
.wjs_app :hover img {
  display: block;
  position: absolute;
  left: 50%;
}
.wjs_app > div {
  display: block;
}

使用less直接帮助我们生成对应的css的代码，代码层次感十足，逻辑分明，主要是看着爽，选择器便于查找，易于维护

6混入

/*混入*/
/*组合样式*/
.w50{
	width: 50%;
}
.f_left{
	float: left;
}
.f_right{
	float: right;
}
/*类混入*/
.w50-f_left{
	.w50();
	.f_left();
}
/*函数混入*/
.w30(){
	width: 30px;
}
/*定义一个包含参数的函数*/
.f(@direction){
	float: :@direction;
}
.w30-f_left{
	.w30();
	.f(right);
}

对应生成的css代码如下

/*混入*/
/*组合样式*/
.w50 {
  width: 50%;
}
.f_left {
  float: left;
}
.f_right {
  float: right;
}
/*类混入*/
.w50-f_left {
  width: 50%;
  float: left;
}
/*函数混入*/
.w30-f_left {
  width: 30px;
}

7rem单位

①em是一个相对的长度单位，与盒子自身的font-size值有关；
②rem是一个相对的长度单位，始终参照html中设置的字体大小。

• 使用rem做适配
  在不同设备下，只需要更改html中的font-size即可。
  人为将UI图横向划分为指定的份数20份（如果UI图width=640px）
  计算出1份所占的大小： 640 / 20 = 32px
  把计算出的1份的大小设置给html { font-size: 32px;}
  1rem = 32px

8@media媒体查询

①媒体设备

all (所有的设备)
print (打印设备)
screen(电脑屏幕,平板电脑,智能手机)

②语法@media not | only 媒体类型 and (特性条件)

alland 可以将多个媒体特性链接到一块，相当于 且 &；
not 排除某个媒体特性 相当于 非 ! （可以省略）
only 指定某个特定的媒体类型 （可以省略）

9、Importing

可以在主文件中通过下面的形势引入 .less 文件, .less 后缀可带可不带

如果想导入一个CSS文件而且不想less对它进行处理，只需要使用.css后缀就可以，这样less就会跳过它不去处理它

10、less函数

参考less中文网，函数齐全
①搜索less

打开第一个，点进去，对应函数好多哦