什么是CSS预处器

CSS预处理器是一种针对CSS样式开发的语言，有自己的变量、常量、条件语句以及编程语法，通过它可以简化CSS样式，增加CSS特性，让你的CSS更加简洁、适应性更强、可读性更佳，易于维护，开发效率更高。最后编译成正常的CSS文件，以供项目使用 。

为什么要使用CSS预处器

首先我们先了解下CSS，它主要是用来进行网页样式设计的，通过CSS定义各标签的显示样式，可以实现各种外观的定义以满足项目的需求，实现想要的效果。所以我们要为每个标签去定义其样式属性，这样就存在样式单一、代码重复、维护难、开发效率低等问题。而CSS预处器出现很好的解决了这些问题，它以编程的思想对样式进行了很好的逻辑处理，可以定义常用变量，也可以定义方法调用，提高了代码的复用性和使用性，同时也简化了CSS样式编写，提高了代码可读性和维护性。

常见的CSS预处器

目前比较流行的CSS预处器主要有3种，分别是Sass、Less、Stylus。

Sass最成熟的一种CSS预处理器语言，它可以使用变量、常量、嵌套、混入、函数、继承、导入等功能多种方法高效的输出CSS样式。新版的Scss也兼容CSS样式

Less和CSS比较相似，同时兼容CSS样式，相对来说比较容易上手，同样支持变量、常量、嵌套、混入、函数、继承、导入等功能多种方法高效的输出CSS样式。

Stylus算新贵吧，简化了很多样式书写形式，同样支持变量、常量、嵌套、混入、函数、继承、导入等功能多种方法高效的输出CSS样式。

安装CSS预处器

我们在创建Vue项目的时候有个，Vue提供了几个常用的组件模板供我们选择，其中就有一项CSS Pre-processors（CSS预处理器）功能，Vue为我们提供了3中预处理方案，分别是Sass、Less、Stylus，选择你想用的即可，项目搭建好之后就内置了。

如果是已经创建好的项目，我们可以自行安装，如sass我们只需要执行命令： npm install --save-dev sass-loader node-sass(sass-loader依赖node-sass),这样我们就安装好了sass。

安装sass-loader时出现报错，万恶的公司网，不支持github访问....，既然用npm安装出现安装失败，只能从淘宝镜像下手了。通过命令安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org，然后再使用淘宝镜像安装node-sass，命令如下：cnpm install node-sass --save-dev。

如果你觉得麻烦还有一种方法，可以在项目根目录创建一个 .npmrc 文件（也可以把这个文件放到你电脑的用户目录中），然后写入如下配置,这样用npm install 安装 node-sass js 时就会自动从淘宝源上下载：

sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
registry=https://registry.npm.taobao.org
proxy=****/我是公司网，必须配这个（正常网络可以忽略）/****

使用CSS预处器

在组件中修改style标签，用lang属性指定使用的CSS预处器类型即可，即<style lang="scss" scoped>，然后在style中写scss语法的样式即可(scss是sass的升级版，与css兼容，可以直接嵌套css样式)，如下所示简单的设置了下svg样式。

<template>
 <div class="home">
 <svg-icon icon-class="user"/>
 <div class="svg-container">
 <svg-icon icon-class="user"/>
 </div>
 </div>
</template>
<style lang="scss" scoped>
.home{
 background:rgb(121, 244, 248);
 position: relative;
 .svg-container{
 width:30px;
 height:50px;
 position: absolute;
 top:50px;
 right:150px;
 }
}
</style>

欢迎关注本人的公众号：编程手札，文章也会在公众号更新