新手刚刚接触SASS对安装与编译上面的不理解

运行Sass的环境

Sass是基于Ruby开发的，所以要运行Sass都需要一个Ruby环境。但并不是说你要懂得Ruby，你只需要在你的电脑中安装一个Ruby环境即可。如果你使用的是Mac电脑，那么就不需要安装，如果你使用的是Win系统，那么需要先在电脑中安装Ruby。也正是因为这个原因，很多同学觉得Sass要依赖于Ruby环境，而放弃使用Sass。

至于如何安装Ruby，就不做过多阐述，因为现在的应用软件安装都是非常简单的，一路下一步即可。

CSS预处理器——Sass、LESS和Stylus实践【未删减版】

Sass安装

对于Sass安装来说是件非常简单的事情，只需要在你的命令终端输入一行命令即可：

gem install sass

提醒一下，在使用Mac的同学，可能需要在上面的命令加上sudo，才能正常安装：

sudo gem install sass

如果你是一位Sass发烧友，你也可以通过--pre参数来安装Sass开发版本，领略Sass的一些最新功能与特性：

gem install sass --pre

不过在天朝往往上面的命令让你无法正常实现安装，如果你碰到这样的事情，那么需要特殊去处理。可以到Rubygems网站上下载Sass安装包,然后在命令终端输入：

gem install <把下载的安装包拖到这里>

直接回车(Enter)即可安装成功。如果你不确认你的Sass是否安装成功，只需要输入命令：

sass -v

看到版本号就表示安装成功。

Sass编译

众所周知，到目前为止，各浏览器是无法直接解析.scss或者.sass文件。换句话说，在Web实际掉用当中，还是需要调用.css文件。这个问题也困扰了很多初学者，常常有人会问，使用Sass进行开发，那么是不是直接通过<link>引用.scss或.sass文件呢？那么这里告诉大家，在项目中还是引用.css文件，Sass只不过是做为一个预处理工具，提前帮你做事情，只有你需要的时候，他才能功效。

这样一来，在Sass开发之后，要使用写好的东西，让Web页面能调用，就得经过一个过程，这个过程就是Sass编译过程。Sass的编译有多种方法：

命令编译

如果你喜欢操纵你的命令终端，那么可以直接通过命令终端来对Sass进行编译，只需要命令终端输入：

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

这是对一个单文件进行编译，如果想对整个项目里所有Sass文件编译成CSS文件，可以这样操作：

sass sass/:css/

上面的命令表示将项目中sass目录中所有.scss(.sass)文件编译成.css文件，并且这些CSS文件都放在css目录当中。

在实际编译过程中，你会发现上面的命令，只能一次性编译。每次修改保存.scss文件之后，都得得新执行一次这样的命令，如此操作太麻烦，其实还有一种方法，就是在编译Sass时，开启watch功能，这样只要你的代码进行任何修改，他都能自动监测到代码的变化，并且给你直接编译过来。

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

命令编译就是这么的简单。当然，使用sass命令编译时，可以带很多参数。

&amp;lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/0f6e659847ae303193121f46bdc977a0.png&quot; data-rawwidth=&quot;907&quot; data-rawheight=&quot;793&quot; class=&quot;origin_image zh-lightbox-thumb&quot; width=&quot;907&quot; data-original=&quot;https://pic2.zhimg.com/ce6847f381ad5af13e0c0aabb5eae129_r.png&quot;&amp;gt;
GUI编译

如果平时工作中不太喜欢使用命令终端的同学，可以考虑使用GUI界面工具来对Sass进行编译。当然不同的GUI工具操作方法略有不同。在此也不一一对编译的界面工具做详细的介绍。对于GUI界面编译工具，目前较为流行的主要有：

• Koala
• Compass.app
• Scout
• CodeKit
• Prepros

自动化配置编译Sass

喜欢自动化研究的同学，应该都知道Grunt和Gulp这两个东东。如果您正在使用其中的任何一种，那么你也可以通过他们来配置，也可以完成Sass的编译。

//Grunt
module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        sass: {
            dist: {
                files: {
                    'style/style.css' : 'sass/style.scss'
                }
            }
        },
        watch: {
            css: {
                files: '**/*.scss',
                tasks: ['sass']
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.registerTask('default',['watch']);
}

//Gulp
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
    gulp.watch('scss/*.scss', ['sass']);
});

gulp.task('default', ['sass','watch']);

扩展阅读

• SASS编译
• Less/Sass编译工具，koala使用指南
• SASS界面编译工具——Codekit的使用
• SASS界面编译工具——Koala的使用
• Nodejs+Grunt配置SASS项目自动编译

Sass调试

Sass调试一直以来都是一件头痛的事情，使用Sass的同学都希望能在浏览器中直接调试Sass文件，能找到对应的行数。值得庆幸的是，现在要实现并不是一件难事了，只要你的浏览器支持"Sourcemap"功能即可。早一点的版本，需要在编译的时候添加--sourcemap参数：

sass --watch --scss --sourcemap style.scss:style.css

在3.3版本之上（我测试使用的版本是3.4.7），不需要添加这个参数也可以：

sass --watch style.scss:style.css

在命令终端，你将看到一个信息：

>>> Change detected to: style.scss
  write style.css
  write style.css.map

这时你就可以像前面展示的gif图一样，调试你的Sass代码。

扩展阅读

• SASS调试
• 实战Sass3.3的Source Maps
• Source Maps 101

如果掌握了上面提到的知识，我想你已具备Sass的初级水平。你会安装Sass、知道Sass语法、会编写Sass代码，也能编译Sass，还能调试Sass代码。但这仅仅是Sass的基础知识。如果还要深入，还是需要花不少时间去学习与实战的。