sass学习笔记-编译-白红宇

sass学习笔记-编译

阅读量：5244 次

发布时间：2019-06-14

本文共 2485 字，大约阅读时间需要 8 分钟。

命令编译

命令编译是指使用你电脑中的命令终端，通过输入 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 命令编译时，可以带很多的参数：

watch 举例：

来看一个简单的示例，假设我本地有一个项目，我要把项目中“bootstrap.scss”编译出“bootstrap.css”文件，并且将编译出来的文件放在“css”文件夹中，我就可以在我的命令终端中执行：

sass --watch sass/bootstrap.scss:css/bootstrap.css

一旦我的 bootstrap.scss 文件有任何修改，只要我重新保存了修改的文件，命令终端就能监测，并重新编译出文件：

GUI 界面工具编译

或许你会说，我一直讨厌使用命令来做事情，我喜欢那种能看得到的界面操作。那么你可以考虑使用 GUI 界面工具来对 Sass 进行编译。当然不同的 GUI 工具操作方法略有不同。如果在此也一一对编译的界面工具做详细的介绍。我们可能需要写一本书来介绍这些编译工具的操作了。所以我们这里做一下简单介绍，对于 GUI 界面编译工具，目前较为流行的主要有：

Koala (http://koala-app.com/)

Compass.app（http://compass.kkbox.com/）

Scout（http://mhs.github.io/scout-app/）

CodeKit（https://incident57.com/codekit/index.html）

Prepros（https://prepros.io/）

相比之下，我比较推荐使用以下两个：

Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)

CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

自动化编译

喜欢自动化研究的同学，应该都知道 Grunt 和 Gulp 这两个东东。如果您正在使用其中的任何一种，那么你也可以通过他们来配置 Sass 的编译。这里仅列出两个示例代码（具体情况要根据您的项目环境来做一定的修改，不建议生搬硬套，容易发生命案，呵呵。

1、Grunt 配置 Sass 编译的示例代码

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']);}

想了解 Grunt 同学请单击这里学习《Grunt-beginner前端自动化工具》。了解自动化可查看http://www.imooc.com/learn/30

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学习可查看http://www.imooc.com/learn/311

转载于:https://www.cnblogs.com/xiaojiu9/p/4525623.html

你可能感兴趣的文章