less、sass-VScode插件推荐

这次更新文章有点久，关键是这几天在备战毕业答辩的事，so隔了5天，在这5天又学了点新的东西

用了差不多两天的时间，在b站看了点有关less与sass的视频，自己的知识库又增加了，有点小开心，所以我来分享下vscode的插件。。4不4有点遗憾？？没有分享知识????

1.简单的介绍less、sass、stylus

这三个都是css预编译器，定义：预编译又称为预处理，是做些代码文本的替换工作处理，条件编译等就是为编译做的预备工作的阶段主要处理#开始的预编译指令预编译指令指示了在程序正式编译前就由编译器进行的操作，可以放在程序中的任何位置。
我看定义也是稀里糊涂，大概意思就是和编程语言差不多了，有了变量、条件判断等等一些代码语法，如果想要深入体会其中的内涵，还需看一遍less或sass的讲解视频。让我最喜欢的就是可以嵌套选择器，比如：
普通css

header {
	width: 100px;
	height: 100px;
	background-color: cyan;
}
header div {
	width: 50px;
	height: 50px;
	background-color: blue;
}

less与scss（sass的升级版，主要搞css的）差不多。这里只简单的写下，让还没有了解过这方面的小伙伴们体验下魅力，当然还可以使用混合的写法，这个可以减少代码量，less与scss就有区别了。说多了。。。。

header {
	width: 100px;
	height: 100px;
	background-color: cyan;
	div {
		width: 50px;
		height: 50px;
		background-color: blue;
	}
}

stylus是来自nodejs社区，功能就比较强大了，可以支持多种语法及格式，比如sass、less、scss的格式都支持，并且还可以混合在一起写，只能说????????，这里就不演示了，有兴趣的小伙伴可以详细的学习。

我在这里就不推荐小伙伴先学习什么了，我可以说下less与scss的各自好处

less 可以引入less.js文件进行编译成css，也可以使用我下面要将的vscode中的插件。

scss 最早也是最成熟的CSS预处理器。需要安装compass工具库、ruby（mac电脑自带），如果只是了解的话可以使用vscode中的插件下面有说的。

2.vscode的Sass/Less/Typescript/Jade/Pug Compile Hero插件

这个插件包含了sass、less、ts等等的自动编译成css、js文件。只要ctrl+s就可以自动生成css文件。默认是在dist文件夹下，有两个css文件一个压缩的的一个是未压缩的。

3.VScode的SCSS Formatter插件

这个插件主要是用来格式化scss代码的。就是按住alt+shift+F，格式化代码。
如果小伙伴有别的格式代码插件，这个可以不用装的。如果下载了这个插件，使用快捷键格式化代码时出现冲突，vscode编辑器会在右下角提示配置格式化当前文件的格式代码插件。你可以选择自己原有的，也可以选择这个。我建议是安装一个格式代码的插件就行，多了会让编辑器变慢的。

4.VScode的sass插件

这个是一个sass与scss代码高亮显示的插件，就是让本来是全白的文字颜色变成了不是全白的了。

----------------------------------分隔线-------------------------------

大功告成。完成上面的安装就可以实现less与scss的自动编译成css

最后，如果小伙伴们在安装上面的插件时，出现了一些问题，可以在评论区留言或者私信我，最好是在评论区留言，因为有很多大佬可以帮助你的哟~~