sass的安装卸载和编译简介

一、Sass安装(windows版):

1.Ruby 的官网(http://rubyinstaller.org/downloads)下载对应需要的 Ruby 版本

2.建议将其安装在 C 盘下,在安装过程中选择第二个选项(不选中,就会出现编译时找不到Ruby环境的情况)

3.Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板。

4.接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。

方法1:打开电脑的命令终端,输入下面的命令gem install sass

方法2:通过 Compass 来安装 Sass

方法3:本地安装 Sass

其他方法

5.命令终端输入sass -v即可查看是否安装成功

6.更新 Sass 命令终端输入  gem update sass

二、卸载(删除)Sass

1.gem uninstall sass  这样就卸载了 Sass ,但这行命令基本上是使用不上。

三、sass的语法格式

Sass 语法是 Sass 的最初语法格式,他是通过 tab 键控制缩进的一种语法规则,而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本,其文件名以“.sass”为扩展名。

注:这种语法格式对于前端人员都不太容易接受,而且容易出错。

so

SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里,并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

注意:不管是 Sass 的语法格式还是 SCSS 的语法格式,他们的功能都是一样的,不同的是其书写格式和文件扩展名不同。

一般都喜欢用新的语法规则,即SCSS,“.scss”使用的是 Sass 的新语法规则,也就是 SCSS 语法规则(类似 CSS 语法格式)。

四、编译

注意:在项目中还是引用“.css”文件  另外新建sass文件夹装.scss文件

1.命令编译:

单文件编译:

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

多文件编译:

sass sass/:css/   表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件,并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法:

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

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

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

2、GUI 界面工具编译 推荐

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

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

3、自动化编译

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

}

(2)Gulp 配置 Sass 编译的示例代码

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的编译的过程中,是不是支持“GBK”编码的。所以在创建 Sass 文件时,就需要将文件编码设置为“utf-8”。

另外一个错误就是路径中的中文字符引起的。建议在项目中文件命名或者文件目录命名不要使用中文字符。而至于人为失误造成的编译失败,在编译过程中都会有具体的说明,大家可以根据编译器提供的错误信息进行对应的修改。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,489评论 1 32
  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,604评论 6 18
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 957评论 0 1
  • gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学...
    井皮皮阅读 1,324评论 0 10
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,993评论 4 50