Css预编译神器

最近，有靓仔吐槽在编译css代码时，每次写选择器都会变成CV大神，虽说有CV加持但是呢依然会觉得很麻烦，毕竟手速不像年轻时候那样为所欲为

在这里呢给推荐大家用一款神级插件，也是小编参与完成的轻量级插件–sass，该插件特点，简单易上手，不需过多配置，事少活好，简直编程一尤物。

那么我们动手前先简单了解一下什么是Sass预编译,Sass (英文全称：Syntactically Awesome Stylesheets) 一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言，是CSS的预处理器，

为什么要用它呢?Css本身语法不够强大，导致重复编写一些代码，无法实现复用，而且代码也不方便维护。有了Sass可以帮助我们减少CSS重复的代码，节省开发时间。

并且Sass 扩展了 CSS3，引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。还能生成良好格式化的 CSS 代码，易于组织和维护，需要注意的是Sass文件后缀为 .scss。

接下来手把手带大家用Sass轻松完成Css样式的工作，缓解咱们CV输出

1. 首先在vscode输入sass

2. 下载安装sass插件

3. 配置：不需配置

4. 在站点创建demo.scss(此时编辑器自动激活插件)

5. 在文件里输入代码会自动生成demo.css(如需生成demo.min.css需在插件内对min.css选项打对钩)

6. Sass编译css具体操作如下(双击图片)：

看完后是不是觉得css编译竟然如此简单！由于浏览器不识别scss文件，所以要引入自动生成的demo.css不然会引起样式在浏览器里加载无效！

*陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐