Sass学习之路——Sass编译

Posted 2020-08-23

Sass的编译也是在我们使用Sass的时候必须要经过的一个步骤，因为".sass"和".scss"文件并不能直接使用<link>标签引用，最终其实还是要将他们转换成CSS文件来在项目中使用。

所以要让web页面真正使用到Sass缩写的东西，编译这个过程是必须要有的。

这里会提到3种编译方法：

1.命令行编译

顾名思义，就是通过电脑里的终端(命令行工具)通过指令来编译Sass文件（个人觉得，这种方式比较直观，但是敲命令有点麻烦）

（1）单文件编译：

sass <Sass文件的路径>/style1.cscc : <要输出的CSS文件的路径>/style1.css

这样就把固定路径下的style1.scss编译到了指定的目录下的style1.css中.

（2）多文件编译：

sass sass/:css/

这样是讲sass目录下所有的sass文件编译成css文件，并放在同级的css文件夹中。

（3）watch指令：

我们可以想象一下，如果我们编译后，又对sass文件进行了多次修改，我们就需要反复的去敲这些繁琐的指令，非常的不方便。

这时watch指令有派上了用场，在编译Sass时，开启watch功能，它就是检测Sass文件的变化，并且自动帮你编译更新后的代码：

sass --watch <上边的编译代码>

 

好了，命令行编译就说到这里。

 

2.图形化界面工具编译

嘛，懒人福音啊，不用敲繁琐的指令，麻麻再也不用担心我敲错指令了。

其实这样的工具很多，这里推介一下Koala(考拉)

官网传播门：http://koala-app.com/

w3cplus的Koala使用指南：http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

 

3.自动化编译:(Grunt和Gulp)

Grunt:因为本喵现在只会用Gulp，所以这里粘一段度娘给的Grunt代码好了，需要的童鞋自取：

1. module.exports = function(grunt) {  
2.     grunt.initConfig({  
3.         pkg: grunt.file.readJSON(‘package.json‘),  
4.         sass: {  
5.             dist: {  
6.                 files: {  
7.                     ‘style/style.css‘ : ‘sass/style.scss‘  
8.                 }  
9.             }  
10.         },  
11.         watch: {  
12.             css: {  
13.                 files: ‘**/*.scss‘,  
14.                 tasks: [‘sass‘]  
15.             }  
16.         }  
17.     });  
18.     grunt.loadNpmTasks(‘grunt-contrib-sass‘);  
19.     grunt.loadNpmTasks(‘grunt-contrib-watch‘);  
20.     grunt.registerTask(‘default‘,[‘watch‘]);  
21. }  

接下来是Gulp:

 

在我的另一边文章里有写到Gulp的编译Sass等文件的方法，这里是传送门：

http://blog.csdn.net/u013034014/article/details/53559069

（本喵比较懒╮(￣▽￣")╭）

 

那么关于Sass编译就写到这里啦，欢迎小伙伴们一起交流

前端交流群——<a href="https://jq.qq.com/?_wv=1027&k=42OiUZ5">点击链接加入群【Magic Coder】</a>