一天搞定前端必备开发技能 (2)——less和Sass预处理器的使用

less

​ Less（LeanerStyleSheets的缩写）是一门向后兼容的CSS扩展语言。

​ 因为LesS和CSS非常像，因此很容易学习。而且Less仅对CSS样式增加了少许方便的扩展，这就是Less如此易学的原因之一。

less环境搭建

​ 首先要求我们有一个Node.js环境，没有的兄弟姐妹可能需要查看我的另一篇文章，简单的安装一个Node.js环境。而且需要node版本高于8.0。

​ 安装好环境之后，我们使用npm命令执行下载less工具：

npm install -g less		//安装less

​ 安装完成之后，我们使用以下命令来对其进行检查，是否安装成功：

lessc -v	//检查安装版本

运行less文件

在本地环境使用less

​ 直接打开Vscode即可运行。

在浏览器环境中使用less

​ 要想在浏览器环境中使用less，就必须要基于服务器运行。node.js也为我们提供了一个很好的工具可以简单的配置HTTP服务器。

​ 首先安装全局服务器：

npm install http-server -g

​ 第二步在项目的根目录下运行：

<link rel="stylesheet/less" type="text/css" href="定义的less文件路径" />
<script src="//cdn.jsdelivr.net/npm/less@3.13"></script>

注意：运行的使用需要在根目录下使用以下👇命令

/根目录文件路径> http-server

安装less转换插件

​ 在vscode中搜索less，找到下面这个👇帅气的图标，安装完成之后就可以将我们写的less文件转换成css文件。

less语法

变量

变量以@开头后面跟定变量值。

声明变量 ：

@变量名称:变量值;
例如：@w-1200:1200px;

混合

混合是一种将一组属性从规则集包含（或混入）到另一个规则集的方法

例如：我们有两个样式.box1和.box2，这两个样式的前两个属性（宽度和高度）是相同的，只有最后一个属性（背景颜色）有所不同。

.box1{
	width:100px;
	height:100px;
	background:red;
}
.box2{
	width:100px;
	height:100px;
	background:blue;
}

这个时候为了书写方便，我们就直接将相同属性抽取出来定义在新的样式当中.box。

.box{
	width:100px;
	height:100px;
}

.box1和.box2就只需要应用.box然后在加上自己所属不同的样式属性即可。

.box{
	width:100px;
	height:100px;
}
.box1{
	.box();
	background:red;
}
.box2{
	.box();
	background:blue;
}

嵌套

​ less提供了使用嵌套代替层叠或与层叠结合使用的能力，如下，将子容器样式嵌套在父容器中使用：

.父容器{
	属性1;
	属性2;
	.子容器{
		子属性1;
		子属性2;
	}
}

​ 用less书写的代码更加简洁，并且模仿了HTML的组织结构。

你还可以使用此方法将伪选择器。下面是一个使用伪类的模版（&表示当前选择器的父级）：

.父容器{
	属性1;
	属性2;
	.子容器{
		子属性1;
		子属性2;
		&:hover{
		伪类
		}
	}
}

运算

​ 算术运算符+、-、*、/可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。

例如：
.box{
	width:100px + 200px
}

​ 计算的结果以最左侧操作数的单位类型为准。

例如：
.box{
	width:100px + 100pc	//会将100pc转换成100px
}

​ 如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px到cm或rad到%的转换。

转义

​ 转义：允许你使用任意字符串作为属性或变量值。

语法模版：

@变量:~'(字符串)';

​ 任何~"anything”或～’anything’形式的内容都将按原样输出，除非interpolation。

​ 这个语法最常用在响应式布局的时候：

@min:~'min-width:100px)';
,box{
	@media @min{
		font-size:10px;
	}
}
//编译为：
@media(min-width:100px){
	.box{
		font-size:10px;
	}
}

函数

​ less 内置了多种函数⽤于转换颜⾊、处理字符串、算术运算等。

​ 在实际的开发过程中，我们很少会使用到less的函数，他与我们平时理解的函数概念有所不同，less的函数更像是其他语言的关键字，是具有特定用法的。

​ 例如一个常见的函数percentage 函数

他能将将 0.5 转换为 50%，那么我们就能将一些需要调整度量的属性上使用这个函数：

将颜⾊饱和度增加5%，以及颜⾊亮度降低 25% 并且⾊相值增加 8 等⽤法：

@width: 0.5;
.class {
     width: percentage(@width); // returns `50%`
}

映射

​ 从Less3.5版本开始，你还可以将混合和规则集作为一组值的映射使用。和JS中的对象非常相似。

#colors() {
 primary: blue;
 secondary: green;
}
.button {
 color: #colors[primary];
 border: 1px solid #colors[secondary];
}

编译后的文件：

.button {
    color: blue;
    border: 1px solid green;
}

作用域

​ less中的作用域与CSS中的作用域非常类似。首先在本地查找变量和混合，如果找不到，则从"父"级作用域继承。

@var: red;
#page {
    @var: white;
    #header {
        color: @var; // white
    }
}

​ 与css自定义属性一样，混合和变量的定义不必在引用之间事先定义的。

@var: red;
#page {
    #header {
    	color: @var; // white
    }
    @var: white;
}

注释

​ less中，块注释和行注释都可以使用 。

//这是行注释

/*
	这是块注释
*/

导入

​ 我们可以通过import关键字进行导入一个.less文件吗，此文件中的所有变量就可以全部使用了。

@import "文件路径"

Sass

Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言，他也是一种CSS预处理器，提供了变量、嵌套规则、混合（mixins）、函数等特性，使得编写CSS更加高效和易于维护。

Sass有两种语法格式：

1. SCSS：使用CSS3语法的一个超集，这意味着任何有效的CSS也是有效的SCSS。
2. Sass：使用缩进代替花括号来表示代码块，使用换行符代替分号来分隔属性。

文件后缀名：

文件名.scss
文件名.sass

安装

Sass可以通过npm（Node.js的包管理器）安装。安装命令如下：

npm install -g sass

安装后，你可以使用命令行工具将.scss或.sass文件编译成CSS。例如：

sass input.scss output.css

语法

变量

​ Sass的变量与less的也是一致的，只不过是使用$符号的标识变量，后面接上我们的变量值即可；

$变量名：变量值；

嵌套

​ 与less是一样的，所以这里就不在过多赘述啦🌹

注释

​ 注释上，sass也同样支持两种注释//和/**/的写法，但是需要注意的是：

1. // 这种注释内容不会出现在⽣成的css⽂件中
2. /**/这种注释内容会出现在⽣成的css⽂件中

混合器

​ 混合器这一块就比较的不一样了，不过别担心，也是一小小的感动而已，咱们继续往下看：

​ 混合器使⽤@mixin标识符定义，然后使用过@include来使⽤这个混合器。

语法模版：

@mixin 样式名1{
	定义样式1
}
样式名2{
	@include 样式名1;
}

继承

​ 继承是独属于Sass的新特性，在less中是没有这个特性的。选择器继承是说⼀个选择器可以继承为另⼀个选择器定义的所有样式。这个通过@extend语法实现。

语法模版：

样式名1{
	定义样式属性;
}
样式名2{
	@extend.样式名1;	//继承样式1的所有样式
    另外还可以子类也是可以重写新的样式
}