H5-CSS预处理语言 Less&Sass——Less

1. Less入门

1.1. 什么是Less

Less是一门CSS预处理语言（不能直接渲染页面，要变异成css文件才可以），它扩充了CSS语言，增加了诸如变量、混合（Mixin）、函数、嵌套等功能，让CSS更加易维护、方便制作主题、扩充。

1.2. 安装

在服务器端最容易的安装方式是通过npm（node.js的包管理器）：
只需要在命令行输入一下语句：

> npm install -g less

安装完后，安装路径就在返回的语句中，在查看电脑的环境目录，在path中含有这个目录就表示能运行less.cmd，接下来就需要验证是否安装成功，在命令行输入下面命令行：

> less -v

若出现内容就表示安装成功。

1.3. 创建Less文件

在编辑器中右键新建文件，选择less文件，书写less代码

1.4. 编译Less文件

方式一：命令行编译
进入项目所在的目录终端，输入一下命令行：

> lessc demo.less demo.css   //demo是less文件名

但是以上方式不能自动刷新，所以就需要使用外部工具辅助。

方式二：使用外部工具（考拉koala外部编译软件）
官网下载地址：http://koala-app.com/index-zh.html

补充：我在官网不知道什么原因下载不到，就在 脚本之家 下载了[https://www.jb51.net/softs/678422.html#downintro2]

直接点击next下一步安装，安装目录可换可不换。
安装后软件默认是英文的，可以点击setting–>General–>Language 进行语言选择，再关掉重新启动软件即可。

为了方便，我在项目中分别新建css文件夹和less文件夹，将less文件夹拖到koala中，考拉有以下常用功能：

• 自动编译：勾选“自动编译”，可以监听less文件变化，自动编译。
• 自动压缩：在koala中将输出方式改成 compress
• 资源定位，报错的时候直接定位less文件，生成source map资源地图文件：编译选项勾选source map

注意：
webstorm自动编译要配置内置File Watchers：
File–>Setting–>Tools–>File Watchers–>（右侧点击加号选择Less，filetype选择less，output选择放置css的目录）

2. Less语法

2.1. 代码注释

• 单行注释(编译后不保留)
• 多行注释(编译后保留)

2.2. 变量

在less中，可以使用变量来统一设置一类可以重复使用的值。使用@符号来定义，语法如下：
@变量名: 变量值

注意：

1. 变量的值一定要符合css属性值的规范
2. 如果 @变量名 与其他字符串拼接，要使用“@{变量名}字符串”来拼接，如

@imgUrl:"../img"
body{
	color: #444;
	background-image: url("@{imgUrl}logo.png");
}

2.3. 混合（Mixins）

混合有点像函数，在定义后，可以通过名称调用。可以封装函数，在别的选择器中调用，提高代码复用性和可维护性。

（1）定义

1. 普通
   .混合名称() {css定义
   }
2. 带参数的混合
   .混合名称(@参数名称: 默认值) {css定义
   }

（2）调用

h1{
	.混合名称();
}
h2{
	.混合名称(参数值);
}

（3）实例

/* 定义混合 */
.error(@color:#999,@size:14px){
	background-color: @color;
	font-size: @size;
}
/* 调用混合 */
.title{		
	/* 传参就更改默认值 */
	.error(#ff0000,20px);
}
.content{
	/* 不传参就使用默认值 */
	.error();
}

2.4. 模式匹配

（1）含义
根据条件进行样式显示，类似JS的switch。相当于定义相同的混合名称，根据分支的值决定执行哪个分支，但是有一个公共分支 @_ 表示匹配所有，通常用语定义公共部分。

（2）定义和使用

定义

.fun(@_, @color){
	/* 任何分支都会执行的公布部分 */
}
.fun(s1, @color){
	/* s1分支独有的代码 */
}
.fun(s2, @color){
	/* s2分支独有的代码 */
}
.fun(s3, @color){
	/* s3分支独有的代码 */
}

使用

h1{
	.fun(s2, @color);
}

（3）实例

/* 三角形的公共部分 */
.triangle(@_,@color,@size){
	width: 0;
	height: 0;
	display: block;
	border: solid @size @color;
	border-color: transparent;
}

/* 左边的三角形 */
.triangle(l,@color,@size){
	border-left-color: @color;
}
/* 右边的三角形 */
.triangle(r,@color,@size){
	border-right-color: @color;
}
/* 上部的三角形 */
.triangle(t,@color,@size){
	border-top-color: @color;
}
/* 底部的三角形 */
.triangle(b,@color,@size){
	border-bottom-color: @color;
}

.triangle{
	.triangle(t,#f90,50px);
}

2.5. 嵌套

（1）定义和用处

具有层级关系的css样式，css层级关系最终是由html结构决定的。用在具有后代关系和父子关系的选择其中，使用了嵌套很大程度减少了代码量，并且代码结构看起来更加清晰。

（2）使用
语法

爷爷的容器{
	/* 爷爷的样式 */
	父亲的容器{
		/* 父亲的样式 */
		自己的容器{
			/* 自己的样式 */
		}
	}
	大伯的容器{
		/* 大伯的样式 */
		大伯儿子的容器{
			/* 大伯儿子的样式 */
		}
	}
}

实例
HTML结构：

<header>
	<div id="logo">div>
	<ul>
		<li><a href="#">菜单一a>li>
		<li><a href="#">菜单二a>li>
		<li><a href="#">菜单三a>li>
		<li><a href="#">菜单四a>li>
		<li><a href="#">菜单五a>li>
	ul>
header>

Less代码：

@bgColor: #3d3d3d;
@h74: 74px;
@w1000:1000px;

header {
	width: @w1000;
	height: @h74;;
	background-color: @bgColor;
	display:flex;

	#logo{
		width: 117px;
		height: @h74;
		background: url(../img/logo.png);
	}
	ul {
		list-style: none;
		display: flex;
		justify-content: space-around; 
		width: @1000 - 118px;
		font-weight:bold;
		
		li {
			line-height: @h74;
			
			a {
				color: #fff;
				text-decoration: none;
				font-size: 14px;

				&:hover {
					color: #f90;
					text-decoration: under-line;
				}
			}
			/* 注意： 在层级中，要使用 & 表示父级.a：hover可以写在a{}外面，也可以写在a{}里面*/
			/*
			a:hover {
				color: #f90;
				text-decoration: under-line;
			}
			*/
		}
	}
}

2.6. 颜色函数（了解）

（1）色彩三要素：色相（颜色的名称）、饱和度（颜色鲜艳程度）、明度（颜色明暗度）

（2）颜色函数：

• lighten(@color, 10%); /* 比@color 亮10%的颜色 */
• darken(@color, 10%); /* 比@color 暗10%的颜色（50%的时候已经变黑了） */
• saturate(@color, 10%); /* 比@color 浓10%的颜色 */
• desaturate(@color, 10%); /* 比@color 淡10%的颜色 */
• spin(@color, 10); /* 比@color 增加10 */
• spin(@color, -10); /* 比@color 减少10 */
• mix(@color, @color2); /* 混合两种颜色 */

（3）实例
HTML结构：

<ul>
	<li>明度颜色li>
	<li>明度颜色li>
	<li>明度颜色li>
	<li>明度颜色li>
	<li>明度颜色li>
	<li>混合颜色li>
	<li>混合颜色li>
	<li>混合颜色li>
	<li>颜色li>
	<li>颜色li>
	<li>颜色li>
ul>

Less代码：

ul {
	list-style: none;
	li:nth-of-type(1) {
		background-color: #ff0000;
	}
	li:nth-of-type(2) {
		background-color: darken(#ff0000, 20%);
	}
	li:nth-of-type(3) {
		background-color: darken(#ff0000, 30%);
	}
	li:nth-of-type(4) {
		background-color: darken(#ff0000, 40%);
	}
	li:nth-of-type(5) {
		background-color: darken(#ff0000, 50%);
	}
	
	li:nth-of-type(6) {
	/* 红色和蓝色混合得到一个紫色 */
		background-color: mix(#ff0000, #0000ff);
	}
}

2.7. 运算符

可以对角度、颜色、高度、宽度等进行运算。
运算符分类：+、-、*、/

HTML结构：

<ul>
	<li>1列表li>
	<li>2列表li>
	<li>3列表li>
	<li>4列表li>
ul>

Less代码：

@w1:200px;
@w2:300px;
@color1:#333;
@color2:#666;

li {
	margin-bottom: 10px;
}
li:nth-of-type(1){
	width: @w1;
	background-color: @color1;
}
li:nth-of-type(2){
	width: @w2;
	background-color: @color2;
}
li:nth-of-type(3){
	width: @w1 + @w2;
	background-color: @color1 + @color2;
}
li:nth-of-type(4){
	width: (@w1 + @w2)/2;
	background-color: @color1 * 2;
}

3. 综合实例

制作三个不同尺寸的按钮。

HTML结构：

"btnL">按钮
"btnM">按钮
"btnS">按钮

Less代码：

.button(@size) {
	width: 100px * @size;
	height: 40px * @size;
	font-size: 14px * @size;
}
.btnL(3) {
	.button(3);
}
.btnM(2) {
	.button(2);
}
.btnS(1) {
	.button(1);
}